问题描述：

刚用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. app常见性能测试点

    转载自 https://blog.csdn.net/xiaomaoxiao336368/article/details/83547318 1.响应 冷启动 首次启动APP的时间间隔 adb shell ...

  2. Java中List的sort排序重写

    最近遇到需要使用list中sort排序功能,list中存的是自己写的类,所以需要重写sort函数,一般实现如下: Collections.sort(voList, new Comparator< ...

  3. 二叉搜索树的第K大节点

    题目描述 给定一颗二叉搜索树,请找出其中的第k大的结点. 分析 对二叉搜索树进行逆向中序遍历(先右再左),则遍历序列是降序排序的,因此中序遍历一颗二叉搜索树,可以很容易的得到它的第k大的节点.使用一个 ...

  4. Eclipse使用Maven创建Web时错误：Could not resolve archetype

    请检查maven的setting 是否有问题.window->Perfenence->maven->User Settings里 看 Gloal Setting和User Setti ...

  5. Redis 数据类型归纳

    Redis的数据类型从整体上看,都是Key-Value键值对的模型,数据类型更确切地说,应该是Value的数据类型,比如string,set,list等,都是key值对应的Value的数据集合格式.不 ...

  6. jquery中val属性操作

  7. PYTHON基础-入门

    变量名可以是数字,字母,下划线,字母不能开头.

  8. 简单搭建一个SpringBoot

    1.SpringBoot下载 https://start.spring.io/ 选择工程类型,编译语言,版本,工程名称,需要支持组件等:选择好了以后点击生成项目. 之后会下载一个压缩文件,解压之后导入 ...

  9. SpringCloud-day06-Ribbon负载均衡

    6.3.Ribbon负载均衡 为了实现真正的负载均衡,我们需要集群3个服务提供给者,而在这之前我们只有一个服务提供者1001,那么我们新建模块microservice-station-provider ...

  10. winform窗体运行时的大小和设计时不一致

    窗体设置的尺寸为1946*850,而电脑分辨率是1920*1280 按说宽度已经超过屏幕大小很多了,应该显示占满屏幕宽度才对,但是运行时宽度只有设计时的一半 高度最多只能是1946像素,再拉大也不管用 ...