浏览器默认样式user agent stylesheet的小问题

日期:2015-09-06 13:54:11

最近做的一个项目遇到了写的样式不起作用的情况,静态页面上效果都是OK的,可是到了本地服务器测试的时候发现样式并不一样,折腾了好久才发现问题。

DOCTYPE

最近在给input设置宽度的时候发现,本地测试是正常的,可是到了本地服务器发现input的长度和静态页面上的查了一截:

QQ截图20150906140659.png

这时候第一时间想到是盒模型渲染的问题,审查元素后发现多了user agent stylesheet


QQ截图20150906141036.png

这是怎么回事呢?又返回静态页面上找了半天,并没有找到,CSS也排查过。后来网上找了一篇文章跟我问题差不多,他的问题是少了DOCTYPE声明。


我返回到浏览器查看了一下,本地服务器上的页面也是少了DOCTYPE标签。可能是对接的时候给漏掉了,这个东西还真不好发现,于是把漏掉的<!DOCTYPE html>给加到页面中去,问题就这样解决了。


DOCTYPE会直接影响我们的页面布局渲染,还记得它总共有几种类型吗?


常用的 DOCTYPE 声明

HTML 5 (HTML 5型)

<!DOCTYPE html>


HTML 4.01 Strict 

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


HTML 4.01 Transitional 

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


HTML 4.01 Frameset 

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0 Strict 

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


总结:调试HTML页面的时候发现怎么也搞不定的bug,可以检查一下DOCTYPE是不是写错了或是漏掉,class的名字是不是写错了,或是标签漏了或是多了。难以发现的问题往往都是很细小的错误导致了。