[译]WTF,HTML&CSS?

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

译自:http://wtfhtmlcss.com/

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

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

声明文档模型

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

盒模型的计算方式

元素设置了paddingborder-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; 
}

或者在父元素上设置overflowauto或者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];,以及leftright的元素中设置width:100%。使用width:100%等同于设置left:0right:0,使用其中一种方案而不是同时使用。

fixed定位和transform

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

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

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus