问题描述：

刚用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. pyqt5 -—-布局管理

    绝对布局 例如: 我们使用move()方法定位了每一个元素,使用x.y坐标.x.y坐标的原点是程序的左上角. lbl1 = QLabel('Zetcode', self) lbl1.move(15, ...

  2. gitlab安装部署汉化

    1.获取gitlab汉化包(要部署非汉化版,可以跳过这一块内容) 说明:gitlab中文社区版的项目,v7-v8.8是由Larry Li发起的“GitLab 中文社区版项目”(https://gitl ...

  3. sql中的不常见查询

    1.对于CROSS APPLY 和 OUTER APPLY 的应用: CROSS APPLY 类似于INNER JOIN 但是,可以规定对于满足条件的数据需要关联几行,应用场景: 每个零件把第一个工单 ...

  4. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 （diff部分待后续更新）

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  5. 【译】深度双向Transformer预训练【BERT第一作者分享】

    目录 NLP中的预训练 语境表示 语境表示相关研究 存在的问题 BERT的解决方案 任务一:Masked LM 任务二:预测下一句 BERT 输入表示 模型结构--Transformer编码器 Tra ...

  6. 爬虫之进阶 基于twisted实现自制简易scrapy框架（便于对scrapy源码的理解）

    1.调度器 class Scheduler(object): """调度器""" def __init__(self, engine): & ...

  7. css入门第一天

    一丶Web标准Web标准不是某一个标准,而是一系列标准的集合,内容与结构与表现形式的分离网页主要有四个部分组成:内容(content),结构(structure), 表现(presentation)和 ...

  8. 内网主机使用yum安装软件

    经常遇到这样的情况:有一台内网linux主机需要安装软件,但是主机又无法连接外网,通常情况下可以使用rpm包或者使用源码编译安装.但常常会遇到依赖缺少的情况,这就麻烦了,要一一找到缺少的软件包. 这种 ...

  9. [Spring实战笔记]4面向切面编程的Spring-代理

    代理 代理(Proxy)是一种设计模式,可以在目标对象实现的基础上,扩展目标对象的功能. 代理对象是对目标对象的扩展,并会调用目标对象. 三种代理模式 静态代理 100% 代理对象与目标对象要实现相同 ...

  10. Python学习笔记5程序的控制结构

    1.分支结构 (1)单分支结构 (2)二分支结构 (3)多分支结构 条件判断 (4)程序的异常处理 2.实例:身体质量指数BMI 思路一(国内,稍作修改就是国际): 思路二: height,weigh ...