问题描述：

刚用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. Springboot中对Service层进行集成测试时注意点

    @SpringBootTest(classes = {DataSourceAutoConfiguration.class,MybatisAutoConfiguration.class,****Impl ...

  2. MM-科目自动分配

    SAP系统篇 MM自动记账解析之基本概念(01) https://blog.csdn.net/qq_33641781/article/details/78027802 MM自动记账解析之功能实现(02 ...

  3. Spring 整合WebSocket, Error during WebSocket handshake: Unexpected response code: 302 还有200的错误

    springboot 集成websocket 及其简单,,,但是管理端使用的是Spring,原生配置,发生这个错误,,,302 被重定向了...我起的是本地locallhost,把ip换成 local ...

  4. 一些java的demo

    //1. false System.out.println(Integer.parseInt("01")>10); //2. abcdefghijklmnopqrstuvwx ...

  5. Android Studio添加aar依赖

    将 implementation fileTree(dir: 'libs', include: ['*.jar']) 改为implementation fileTree(dir: 'libs', in ...

  6. jmeter学习笔记--线程组

    jmeter组件:线程组 是什么? 进程:一个正在执行的程序对应一个进程 线程:进程中的执行线索(一个进程中有多个执行线索) 线程组:按照线程性质对线程进行分组 并发执行:多个线程同时进行    特点 ...

  7. python入门（十四）：面向对象（属性、方法、继承、多继承）

    1.任何东西1)属性(特征:通常可以用数据来描述)(类变量和实例变量)2)可以做一些动作(方法) 类来管理对象的数据.属性:类变量和实例变量(私有变量)方法:    1)实例方法    2)类方法   ...

  8. （十）操作数据库、xlrd、xlwt补充

    一.补充操作数据库: 1.建立游标时,指定返回的类型是字典 cur = coon.cursor(cursor=pymysql.cursors.DictCursor) 2.cur.fetchall()  ...

  9. day46 前端基础HTML5+CSS3

    编辑器 pycharm,sublime,hbuild,webstorm,atom 前端概念 广义:用户能看见并且交互的显示页面 狭义:运行在浏览器上的页面 学习的语言 html5 => (h5架 ...

  10. 【题解二连发】Construct Binary Tree from Inorder and Postorder Traversal & Construct Binary Tree from Preorder and Inorder Traversal

    LeetCode 原题链接 Construct Binary Tree from Inorder and Postorder Traversal - LeetCode Construct Binary ...