问题描述：

刚用thymeleaf不久，考虑到公共头部的导入css,js代码，需要拆分。

拆分之后，bootstrap-select下拉多选框出现“样式异常”，本认为是头部拆分问题，css样式未导入成功，

解决过程：

查看firebug(F12)->Network

发现并不是css未导入，查看页面源码发现问题所在

缺少<!DOCTYPE html>，在显示页面（即下面的menu.html）第一行添加该行，问题解决。

问题原因：

浏览器解析文件，第一行必须写明文档类型，不然浏览器也不知道怎么解析。附带：http://www.w3school.com.cn/tags/tag_doctype.asp

源码：

显示：

 <!DOCTYPE html>

 <div th:replace="/common/header :: html"></div>

 <body>

     <div class="container">

     <form class="form-horizontal">

         <div class="form-group">

             <label class="col-sm-2 control-label">test:</label>

             <div class="col-sm-10">

                 <select class="selectpicker form-control" mutiple>

                     <option>11111</option>

                     <option>22222</option>

                     <option>33333</option>

                     <option>44444</option>

                 </select>

             </div>

         </div>

     </form>

     </div>

 </body>

 </html>

menu.html

头部：

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap.min.css}">

<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap-select.min.css}">

<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.min.js}"></script>

<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>

<script type="text/javascript" src="/js/bootstrap/bootstrap-select.min.js"></script>

</head>

header.html

另：

在header.html中的th:src，th:href写法和原生html引入的写法有所区别

th:href相比href会在路径前添加context-path代表的字符串（项目名称），并且动态拼接等号后面的参数

附：

thymeleaf拆分头部（head）显示异常问题的更多相关文章

  1. 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常

    起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图 然后本人做实验找了半天原因终于是找到 ...

  2. IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  3. RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  4. PyQt通过resize改变窗体大小时ListWidget显示异常

    前几天开始的pygame音乐播放器Doco,做的差不多了,上午做到了歌词显示和搜索页面.遇到bug,即通过resize改变ui大小时ListWidget显示异常 #目的: 增加一部分窗口用来显示歌词和 ...

  5. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

  6. LCD 显示异常定位分析方法

    第一种情况: 进入kernel或android 后,如果LCM图像示异常,可以通过如下步骤来判断问题出现在哪个层面. step1:通过DMMS截图,来判断上面刷到LCM的数据是否有问题. 若DMMS获 ...

  7. Win32项目生成的程序exe图标显示异常的问题

    问题 如图: 用VS2013生成exe执行文件时发现的问题,起初以为是没添加ico图像的最小尺寸,后来查看ico并不是这个问题. Baidu.Google了半天找到原因:文件资源管理器的图标缓存bug ...

  8. 在本地运行正常的静态网页放到tomcat中却显示异常的原因

    在本地写好了一个个人网站,本地直接用浏览器运行,很顺利,然而把网站放到Tomcat里面,却发现图片显示不出来,这就奇怪了. 后来发现,我的网站的Image文件夹用了大写“I”,而网页里面的路径用了小写 ...

  9. Xcode9.2打包图片显示异常解决方案

    链接:https://www.jianshu.com/p/ca0bbb403143來源:简书 在使用Xcode9.2适配iPhone X的过程中遇到了部分图片显示异常(不显示或花掉)的问题.主要分两种 ...

随机推荐

  1. SpringCloud系列十：SpringCloudConfig 高级配置（密钥加密处理(JCE)、KeyStore 加密处理、SpringCloudConfig 高可用机制、SpringCloudBus 服务总线）

    1.概念:SpringCloudConfig 高级配置 2.具体内容 在 SpringCloudConfig 之中考虑到所有配置文件都暴露在远程仓库之中的安全性问题,所以提供有安全访问的处理机制,这样 ...

  2. Android中四大组件总结

    android四大组件分别为activity.service.content provider.broadcast receiver. 一.android四大组件详解 1.activity (1)一个 ...

  3. CentOS 7设置yum仅仅下载rpm不安装总结

    前言 参考文章:https://linux.cn/article-7937-1.html 在参考文章的基础上进行总结. 使用download-only插件实现 首先我们可以使用downloadonly ...

  4. Https的前世今生

    1.年前会议 马上要过年了,公司业务上的需求也少了很多,这不,王小二他们召开了一场技术会议,盘点年前能干点啥. 只见C哥写了一份清单,其中一项是全站升级https. C哥说:https是一种趋势,但目 ...

  5. （ZT）算法杂货铺——分类算法之决策树(Decision tree)

    https://www.cnblogs.com/leoo2sk/archive/2010/09/19/decision-tree.html 3.1.摘要 在前面两篇文章中,分别介绍和讨论了朴素贝叶斯分 ...

  6. 基于maven来Spring MVC的环境搭建遇到“坑”

    1.注解配置路径问题: 在web.xml中配置spring mvc 路径时, 应该配置如下:classpath:classpath:spring-* 2.jdk版本和Spring MVC版本不一致问题 ...

  7. Version Control/Git，SVN

    一.Version Control 1.什么是Version Control 版本控制(Version Control)是指对软件开发过程中各种程序代码.配置文件及说明文档等文件变更的管理,是软件配置 ...

  8. Halcon知识点随记（每日更新）

    部分积累自重码网视频 1.dev_update_off.dev_update_on 一般dev_update_off放在开始,dev_update_on放在程序结束 dev_update_window ...

  9. C++读取与保持图片

    #include<iostream> using namespace std; void main(void) { //保存输入图像文件名和输出图像文件名 ]; ]; //图像数据长度 i ...

  10. calico

    1. ipinip means what? 2. route 172.22.100.192/26 via 192.168.108.1 dev eth1 192.168.19.0/24 via 192. ...