HTML和CSS的一些东西会让你忍不住说“这TM是什么玩意儿！”。以下是困惑、失策和困境这些困扰着HTML和CSS问题清单:
• Doctype的声明
• Box Model的计算问题
• Rem单位和Mobile Safari
• 浮动（float）排在第一
• 浮动（float）和清除浮动（clear）
• 浮动和计算高度
• 浮动元素是块级元素
• 垂直相邻margin的倒塌
• 设计表单的行
• Firefox和<input>按钮
• Firefox按钮的内部轮廓
• 始终在<button>上设置type
• IE浏览器选择器的限制
• 位置解释
• 位置和宽度
• 定位与转换
Doctype的声明
总要有doctype声明。我建议用html5中简单的doctype声明方式
|
1
|
<!DOCTYPE html>
|
不声明doctype会导致畸形的表单、输入框和其它的一些问题；且会让页面在quirk mode下显示。
Box Model的计算问题
当元素定义了padding和border-width中的1个或2个后，你设置的width值会变得比实际的大。为了避免这个问题的发生，现在就用box-sizing: border-box;这种通过的方法来重新设置。
Rem单位和Mobile Safari
虽然Mobile Safari支持使用rem的所有属性值时。但当rem被用在维媒体查询和以不同大小无限闪烁页面的文本时，它就不行了。
就这种情况而言，目前还是用em来代替rem吧。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
html {
font-size
:
16px
;
}
/* Causes flashing bug in Mobile Safari */
@media (
min-width
:
40
rem) {
html {
font-size
:
20px
;
}
}
/* Works great in Mobile Safari */
@media (
min-width
:
40em
) {
html {
font-size
:
20px
;
}
}
|
求助！如果你有苹果或WebKit关于这方面的错误报告，我很乐意将它放到本文中。由于它只适用于移动应用，不适用于桌面程序，Safari浏览器（非Mobile Safari），我不确定在哪里会报告这个错误。
浮动（float）排在第一
在文档顺序中，浮动的元素应该总是放在第一。浮动的元素需要一些东西来环绕，否则其顺序会下降，在内容之下显示。
|
1
2
3
4
5
6
|
<
div
class
=
"parent"
>
<
div
class
=
"float"
>Float</
div
>
<
div
class
=
"content"
>
<!-- ... -->
</
div
>
</
div
>
|
浮动（float）和清除浮动（clear）
如果你使用浮动,很可能你需要使用清除浮动。任何跟着浮动元素的内容均会环绕着浮动元素，除非使用清除浮动。你可以使用以下的方法来清除浮动。
micro clearfix方法通过使用单独的类来清除浮动
|
1
2
3
4
5
6
7
8
|
.clearfix:before,
.clearfix:after {
display
: table;
content
:
""
;
}
.clearfix:after {
clear
:
both
;
}
|
或者，在parent中用auto 或 hidden 来指定overflow。
|
1
2
3
4
5
6
|
.parent {
overflow
:
auto
;
/* clearfix */
}
.other-parent {
overflow
:
hidden
;
/* clearfix */
}
|
考虑到overflow可能会产生意想不到的副作用，在parent中将其以特别的方式标注在定位元素旁。
专业意见！当清除浮动由于其它原因能作为属性使用时，通过像/* clearfix */ 这样的注释能让你把握自己的未来，且能让你的同事高兴。
浮动和计算高度
一个只有浮动内容的父元素将有一个计算的高度值height: 0;。给父元素加clearfix，强制浏览器计算一个高度值。
浮动元素是块级元素
用了float的元素会自动地变成display: block;没有必要两个属性都设置，因为float会覆盖你的display。
|
1
2
3
4
|
.element {
float
:
left
;
display
:
block
;
/* Not necessary */
}
|
有趣的事实：几年前，我们必须要设置display: inline;，让大多数的浮动元素能够兼容IE6，避免双倍margin值的bug,。不管怎样，那些日子早已过去了。
垂直相邻margin的倒塌
相邻元素（一个接一个地）的顶部和底部的margin可能会在很多情况下倒塌，但对于浮动元素或绝对定位的元素绝不会出现这样的情况。阅读这篇MDN文章或CSS2规范里的collapsing margin章节来了解更多东西吧。
水平相邻的margin永远不会倒塌。
设计表单的行
表单的行，<tr>，不要接收border，除非你在父<table>上设置了 border-collapse: collapse;。此外，如果<tr>和子<td>或<th>有同样的border-width，表单行的border将不起作用。点链接查看示例。
Firefox和<input>按钮
由于一些未知原因，Firefox能提交line-height和适用不能被自定义CSS覆盖的<input>按钮。
你可以通过以下两种方法解决这个问题：
1. 坚持使用<button>元素
2. 在你的按钮中不要使用line-height
你应该先用第一种方法（不管怎样，我都建议用这种方法，因为<button>元素很好），以下是你需要知道的：
|
1
2
3
4
5
6
7
|
<!-- 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浏览器打开链接来看看原始的问题和解决方案。
好消息！这个问题在Firefox30中似乎被解决了。对于我们以后的使用来说这是个好消息。但值得注意的是这个问题仅在新版本中得到解决，旧版本的问题并未得到解决。
Firefox按钮的内部轮廓
Firefox用：focus给按钮（<input>和<button>）增加了一个内部轮廓。显然，这是为了其可访问性做的，不过它的位置似乎相当怪异。用以下这段CSS来覆盖它：
|
1
2
3
4
5
|
input::-moz-focus-inner,
button::-moz-focus-inner {
padding
:
0
;
border
:
0
;
}
|
你可以通过前一章节提到的例子中查看这个解决方案。
专业意见！一定要在按钮、链接和输入元素中包含一些焦点状态。提供可访问功能是至关重要的，对于用tab键来选择内容的专业用户亦是如此。
始终在<button>上设置type
默认值是submit，意味着表单内的button都可以提交表单。所有type=”button”的元素匀不会提交表单，type=”submit”的元素则会提交表单。
|
1
2
|
<
button
type
=
"submit"
>Save changes</
button
>
<
button
type
=
"button"
>Cancel</
button
>
|
在应用中，如果在表单外使用button就使用type=”button”。
|
1
|
<
button
class
=
"dismiss"
type
=
"button"
>x</
button
>
|
有趣的事实：显然IE7不能很好的支持button的value属性。如果不看属性内容的话，innerHtml（<button>标签之间的内容）可以弥补这个问题。然而，由于IE7的使用率已经下降和给<button>设置value及innerHtml似乎极少见这两个原因让我觉得这并不是一个很值得关注的问题。
IE浏览器选择器的限制
IE9及更早版本的IE浏览器每个样式表中只支持4096个选择器。组合样式表和每个页面中包含<style></style>的数量也受到了限制，最大只能31。在这个限制之后做的任何东西都会被浏览器给忽略掉。分割CSS，或者开始重构。我建议后者
作为一个有用的边注，下面是浏览器计算选择器的方法：
|
1
2
3
4
5
6
7
8
9
10
11
|
/* One selector */
.element { }
/* Two more selectors */
.element,
.other-element { }
/* Three more selectors */
input[type=
"text"
],
.form-control,
.form-group > input { }
|
位置解释
设置了position:fixed；的元素被放置在与浏览器窗口有关的地方。设置了position:absolute；的元素被放置在离与static（例如，relative,absolute,fixed）不同位置的父元素最近的地方。
位置和宽度
不要给已经设置了position:[absolute|fixed];,left,right的元素设置width:100%。使用width:100%与使用left:0,right::0效果是一样的。选择使用其中一种，但别两种都用。
定位与转换
如果父元素设置了transform，那么position:fixed将不起作用。用transform创建一个新的包含块，有效的强制父元素设置position:relative且固定元素的作用与position:absolute.一样
扫一扫
2883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
