toc

• 声明文档模型
• 盒模型的计算方式
• 移动端Safari下的rem单位
• 将浮动元素放在前面
• 浮动和清除浮动
• 浮动和计算后高度
• 浮动元素是块级级别
• 垂直临近外边距叠加
• 表格中行的样式
• Firefox中的<input>按钮
• Firefox中按钮的内轮廓
• 永远为<button>设置type属性
• IE浏览器的CSS选择器数量限制
• 定位的解释
• 定位和宽度
• fixed定位和transform

Intro

绝非是标题党，下面的东西至少让你少踩几次坑，翻译完才发现这篇文章已经有人翻译过了，但是经过对比，还是自以为翻译的要用心点:(。

译自：http://wtfhtmlcss.com/。

—————译文—————

一些HTML和CSS的组合也许会让你忍不住爆粗口，下面是整理出的列表

声明文档模型

如果遗漏文档模型会导致，浏览器使用怪异模式渲染页面，表格，输入框等会显得畸形。

盒模型的计算方式

元素设置了padding，border-width之后width值就会变大，如果要改变这种计算的方式，可以使用box-sizing:border-box来重置。

移动端Safari下的rem单位

移动端Safari支持rem单位，但它在使用其作为媒体查询时候会变得很糟糕，页面中的文字会在不同大小间不停闪烁。

对于现在，解决的方案便是，使用em代替rem。

 html { font-size: 16px; } /* Causes flashing bug in Mobile Safari */ 
 @media (min-width: 40rem) { html { font-size: 20px; } } /* Works great in Mobile Safari */ 
 @media (min-width: 40em) { html { font-size: 20px; } }

求救！，如果你有向Apple或者WebKit提交这个bug的链接，烦请告知。我不确定怎么向移动端，而不是桌面的Safari提交。

译注，此bug，测试的时候并未重现，不知还有什么解答？

将浮动元素放在前面

浮动的元素应该一直吃在文档顺序的前面。浮动元素需要东西来围绕，否则它们就会引起高度塌陷(step down effect)，浮动的反而在内容的下面，在此查看译者的Demo。

<div class="parent">
	<div class="float">Float</div>
	<div class="content"><!-- ... --></div>
</div>

浮动和清除浮动

如果你使用了浮动，你或许需要将其清除。在浮动元素之后的内容将会环绕着浮动元素，直到将其清除。清楚浮动可以使用下面的几种方法。

使用the micro clearfix作为一个单独的class来清除浮动。

.clearfix:before,
.clearfix:after { 
	display: table; 
    content: ""; 
} 
.clearfix:after { 
	clear: both; 
}

或者在父元素上设置overflow为auto或者hidden。

.parent { 
	overflow: auto; /* clearfix */ 
} 
.other-parent { 
	overflow: hidden; /* clearfix */ 
}

需要注意的是使用overflow将会导致一些意想不到的问题，特别是父元素内有绝对定位元素的时候。

高级提示！，将该属性作为清除浮动作用的时候，你可以加上诸如/* clearfix */之类的注释，以此来提醒你和你的协作者。

浮动和计算后高度

父元素只有浮动内容，它的计算后的height:0。给父元素添加清除浮动将会强制浏览器计算出真正的高度。

浮动元素是块级级别

元素使用float之后将会自动变为display:block;，因此两者不必同时设置，并且float将会覆盖你的display。

.element { 
	float: left; 
    display: block; /* Not necessary */ 
}

**有趣的是：**多年之前，我们在浮动元素中设置display:inline;来让其在IE6中避免双边距叠加(double margin bug)的bug，但是这种情况早已一去不复返。

垂直临近外边距叠加

临近元素(一个跟在另一个后面)的顶部外边距和底部外边距在很多情况下会叠加，但是对于浮动元素或者绝对定位的元素则不会。阅读这篇MDN的文章或者CSS2 spec’s的collapsing margin section来了解更多。

水平方向的临近外边距不会叠加。

表格中行的样式

如果不在<table>元素上设置border-collapse:collapse;，<tr>元素上的border属性将不会生效。此外如果<tr>和它子元素<th>，<td>的border-width值相同，<tr>元素的border属性也不会生效。可以在此查看这个例子。

Firefox中的<input>按钮

由于一些未知的原因，Firefox中提交和按钮的<input>中line-height属性不能用CSS覆盖。对此下面有两个选择：

• 使用<button>元素。
• 在你的按钮中不要使用line-height属性。

如果你选择了你一个选项（我也推荐这个，因为<button>元素确实很棒），你需要知道的是：

<!-- Not so good --> 
<input type="submit" value="Save changes" /> 
<input type="button" value="Cancel" /> 

<!-- Super good everywhere --> 
<button type="submit">Save changes</button> 
<button type="button">Cancel</button>

如果你选用了第二种方案，不使用line-height只是使用padding来垂直居中按钮文字。在Firefox中查看这个例子及其解决方案。

**好消息！**看起来在Firefox 30的版本中对此做出了修复，这很好，不过需要注意的是这个问题在老的版本中仍然存在。

Firefox中按钮的内轮廓

Firefox在按钮(<input>以及<button>)的:focus状态时添加了内轮廓。
表面上看来这是为了更好的可用性。但是看起来有点丑陋。可使用这样的CSS覆盖它：

input::-moz-focus-inner, 
button::-moz-focus-inner { 
	padding: 0; border: 0; 
}

你可以在上述的例子中看到对此的修复。

**高级提示！**确保在按钮、链接和输入框中有focus的状态，以此来为使用tab切换的用户和视力障碍的用户提供更好的可供性(affordance)。

永远为<button>设置type属性

默认的值是submit，以此来让表单内的任何按钮可以提交表单。在无需提交表单的按钮中使用type="button"。

<button type="submit">Save changes</button> 
<button type="button">Cancel</button>

对于需要表单之外需要执行动作的<button>设置type="button"。

<button class="dismiss" type="button">x</button>

**有趣的是：**似乎IE7不支持<button>中的value属性。它读取<button>元素内(<button>起始和结束标签内)的文本(innerHTML)。然而我让为这没什么要紧的关系，因为不但IE7的用户在下降，而且很少有看到同时设置<button>元素的value属性和元素内的文本。

IE浏览器的CSS选择器数量限制

IE9及以下的IE浏览器支持的一个样式表中选择器的上限是4096。同时一个页面中只容许最多31个样式表的引入(包括外部引入和<style></style>)。任何超出的样式将会被浏览器忽略，要么分割你的CSS，要么重构你的代码，我建议后者。

作为一个帮助新的提示，下面是浏览器如何计算选择器的：

/* One selector */ 
.element { } 
/* Two more selectors */ 
.element,
.other-element { } 
/* Three more selectors */ 
input[type="text"], 
.form-control, 
.form-group > input { }

定位的解释

设置position:fixed;的元素是相对于浏览器的视口(viewport)。设置position:absolute;则是相对于最近的设置position属性为非static(例如,relative,absolute或者fixed)的父元素。

定位和宽度

不要在设置了position:[absolute|fixed];，以及left和right的元素中设置width:100%。使用width:100%等同于设置left:0和right:0，使用其中一种方案而不是同时使用。

fixed定位和transform

浏览器破坏position:fixed;当元素的父元素设置transform属性。使用transform也就创建了一个新的包含块(containing block)，将会强制父元素有一个position:relative;并且fixed的子元素的行为就像position:absolute;。

查看这个Demo，阅读对此问题Eric Meyer’s的文章。