问题描述：

刚用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. 一个linux 驱动升级的小问题记录

    重复踩了两次坑,所以简单记录下. 内核 3.10. 在修改了驱动的gro实现之后,进行驱动版本的升级,make && make install 之后,发现tg3的驱动,没有生效. 相同 ...

  2. 关于在centos6 + grub的旧版本中，如何关闭CPU throttling

    由于个人需求,要编译安装ATLAS库,其中就有关闭CPU throttling的步骤, 最常规简单的方法是修改grub /etc/default/grub/ 之后再接一些简单的步骤 + 重启就完成了. ...

  3. 基于Keepalived的MySQL高可用

    keepalived负责的是故障转移,至于故障转以后的节点之间数据的一致性问题依赖于具体的复制模式.不管是主从.一主多从还是双主.集群节点个数.主从具体的模式无关(常规复制,半同步复制,GTID复制, ...

  4. VS2017编译SNMP++步骤记录

    1.下载地址:https://www.agentpp.com/download.html 三个都下 2.新建解决方案 TestSnmp 3.下载后解压到解决方案文件夹(注意,解压后的 snmp++的版 ...

  5. 页面启动jquery

  6. yii2.0 引入autoload.php提示Operation not permitted

    open_basedir()配置下就可以了.比如目录是/www/ad/web/yii/就在/usr/local/nginx/conf/fastcgi.conf里面修改下配置 opendir=/www/ ...

  7. Go 指针

    变量是存储值得地方. 借助声明变量时使用的名字来区分. 指针的值是一个变量的地址.一个指针指示值所保存的位置.不是所有的值都有地址,但是所有的变量都有.使用指针,可以在无需知道变量名字的情况下,间接读 ...

  8. java将一个List赋值给另一个List

    声明和实例化: 声明:ArrayList a, 仅仅只是声明了一个list变量,其未来作用相当于C++中的引用变量,亦或者相当于一个对象块的索引,但并未为其分配具体的完整的对象所需要的内存空间,其所分 ...

  9. 安装好visual studio后，如何添加新的工作负载和组件

    重新运行visual studio安装程序,出现添加删除组件的界面,勾选即可.

  10. ThinkPHP学习笔记

    1.什么是框架? 特征一:是一对代码的集合: 特征二:一个半成品的应用: 特征三:包含了一些优秀的设计模式: 定义:框架是一堆包含了常量.方法和类等代码的集合,它是一个半成品的应用,只包含了一些项目开 ...