HTML和CSS的一些東西會(huì)讓你忍不住說(shuō)“這TM是什么玩意兒！”。以下是困惑、失策和困境這些困擾著HTML和CSS問(wèn)題清單:
? Doctype的聲明
? Box Model的計(jì)算問(wèn)題
? Rem單位和Mobile Safari
? 浮動(dòng)（float）排在第一
? 浮動(dòng)（float）和清除浮動(dòng)（clear）
? 浮動(dòng)和計(jì)算高度
? 浮動(dòng)元素是塊級(jí)元素
? 垂直相鄰margin的倒塌
? 設(shè)計(jì)表單的行
? Firefox和<input>按鈕
? Firefox按鈕的內(nèi)部輪廓
? 始終在<button>上設(shè)置type
? IE瀏覽器選擇器的限制
? 位置解釋
? 位置和寬度
? 定位與轉(zhuǎn)換
Doctype的聲明
總要有doctype聲明。我建議用html5中簡(jiǎn)單的doctype聲明方式
<!DOCTYPE html>
不聲明doctype會(huì)導(dǎo)致畸形的表單、輸入框和其它的一些問(wèn)題；且會(huì)讓頁(yè)面在quirk mode下顯示。
Box Model的計(jì)算問(wèn)題
當(dāng)元素定義了padding和border-width中的1個(gè)或2個(gè)后，你設(shè)置的width值會(huì)變得比實(shí)際的大。為了避免這個(gè)問(wèn)題的發(fā)生，現(xiàn)在就用box-sizing: border-box;這種通過(guò)的方法來(lái)重新設(shè)置。
Rem單位和Mobile Safari
雖然Mobile Safari支持使用rem的所有屬性值時(shí)。但當(dāng)rem被用在維媒體查詢和以不同大小無(wú)限閃爍頁(yè)面的文本時(shí)，它就不行了。
就這種情況而言，目前還是用em來(lái)代替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;
}
}
求助！如果你有蘋果或WebKit關(guān)于這方面的錯(cuò)誤報(bào)告，我很樂(lè)意將它放到本文中。由于它只適用于移動(dòng)應(yīng)用，不適用于桌面程序，Safari瀏覽器（非Mobile Safari），我不確定在哪里會(huì)報(bào)告這個(gè)錯(cuò)誤。
浮動(dòng)（float）排在第一
在文檔順序中，浮動(dòng)的元素應(yīng)該總是放在第一。浮動(dòng)的元素需要一些東西來(lái)環(huán)繞，否則其順序會(huì)下降，在內(nèi)容之下顯示。
<div class="parent">
<div class="float">Float</div>
<div class="content">
<!-- ... -->
</div>
</div>
浮動(dòng)（float）和清除浮動(dòng)（clear）
如果你使用浮動(dòng),很可能你需要使用清除浮動(dòng)。任何跟著浮動(dòng)元素的內(nèi)容均會(huì)環(huán)繞著浮動(dòng)元素，除非使用清除浮動(dòng)。你可以使用以下的方法來(lái)清除浮動(dòng)。
micro clearfix方法通過(guò)使用單獨(dú)的類來(lái)清除浮動(dòng)
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
或者，在parent中用auto 或 hidden 來(lái)指定overflow。
.parent {
overflow: auto; /* clearfix */
}
.other-parent {
overflow: hidden; /* clearfix */
}
考慮到overflow可能會(huì)產(chǎn)生意想不到的副作用，在parent中將其以特別的方式標(biāo)注在定位元素旁。
專業(yè)意見(jiàn)！當(dāng)清除浮動(dòng)由于其它原因能作為屬性使用時(shí)，通過(guò)像/* clearfix */ 這樣的注釋能讓你把握自己的未來(lái)，且能讓你的同事高興。
浮動(dòng)和計(jì)算高度
一個(gè)只有浮動(dòng)內(nèi)容的父元素將有一個(gè)計(jì)算的高度值height: 0;。給父元素加clearfix，強(qiáng)制瀏覽器計(jì)算一個(gè)高度值。
浮動(dòng)元素是塊級(jí)元素
用了float的元素會(huì)自動(dòng)地變成display: block;沒(méi)有必要兩個(gè)屬性都設(shè)置，因?yàn)閒loat會(huì)覆蓋你的display。
.element {
float: left;
display: block; /* Not necessary */
}
有趣的事實(shí)：幾年前，我們必須要設(shè)置display: inline;，讓大多數(shù)的浮動(dòng)元素能夠兼容IE6，避免雙倍margin值的bug,。不管怎樣，那些日子早已過(guò)去了。
垂直相鄰margin的倒塌
相鄰元素（一個(gè)接一個(gè)地）的頂部和底部的margin可能會(huì)在很多情況下倒塌，但對(duì)于浮動(dòng)元素或絕對(duì)定位的元素絕不會(huì)出現(xiàn)這樣的情況。閱讀這篇MDN文章或CSS2規(guī)范里的collapsing margin章節(jié)來(lái)了解更多東西吧。
水平相鄰的margin永遠(yuǎn)不會(huì)倒塌。
設(shè)計(jì)表單的行
表單的行，<tr>，不要接收border，除非你在父<table>上設(shè)置了 border-collapse: collapse;。此外，如果<tr>和子<td>或<th>有同樣的border-width，表單行的border將不起作用。點(diǎn)鏈接查看示例。
Firefox和<input>按鈕
由于一些未知原因，F(xiàn)irefox能提交line-height和適用不能被自定義CSS覆蓋的<input>按鈕。
你可以通過(guò)以下兩種方法解決這個(gè)問(wèn)題：
1. 堅(jiān)持使用<button>元素
2. 在你的按鈕中不要使用line-height
你應(yīng)該先用第一種方法（不管怎樣，我都建議用這種方法，因?yàn)?lt;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>
如果你想要用第二種方法的話，只要不設(shè)置line-height且只使用padding垂直對(duì)齊按鈕文本就行了。用firefox瀏覽器打開(kāi)鏈接來(lái)看看原始的問(wèn)題和解決方案。
好消息！這個(gè)問(wèn)題在Firefox30中似乎被解決了。對(duì)于我們以后的使用來(lái)說(shuō)這是個(gè)好消息。但值得注意的是這個(gè)問(wèn)題僅在新版本中得到解決，舊版本的問(wèn)題并未得到解決。
Firefox按鈕的內(nèi)部輪廓
Firefox用：focus給按鈕（<input>和<button>）增加了一個(gè)內(nèi)部輪廓。顯然，這是為了其可訪問(wèn)性做的，不過(guò)它的位置似乎相當(dāng)怪異。用以下這段CSS來(lái)覆蓋它：
input::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border: 0;
}
你可以通過(guò)前一章節(jié)提到的例子中查看這個(gè)解決方案。
專業(yè)意見(jiàn)！一定要在按鈕、鏈接和輸入元素中包含一些焦點(diǎn)狀態(tài)。提供可訪問(wèn)功能是至關(guān)重要的，對(duì)于用tab鍵來(lái)選擇內(nèi)容的專業(yè)用戶亦是如此。
始終在<button>上設(shè)置type
默認(rèn)值是submit，意味著表單內(nèi)的button都可以提交表單。所有type=”button”的元素勻不會(huì)提交表單，type=”submit”的元素則會(huì)提交表單。
<button type="submit">Save changes</button> <button type="button">Cancel</button>
在應(yīng)用中，如果在表單外使用button就使用type=”button”。
<button class="dismiss" type="button">x</button>
有趣的事實(shí)：顯然IE7不能很好的支持button的value屬性。如果不看屬性內(nèi)容的話，innerHtml（<button>標(biāo)簽之間的內(nèi)容）可以彌補(bǔ)這個(gè)問(wèn)題。然而，由于IE7的使用率已經(jīng)下降和給<button>設(shè)置value及innerHtml似乎極少見(jiàn)這兩個(gè)原因讓我覺(jué)得這并不是一個(gè)很值得關(guān)注的問(wèn)題。
IE瀏覽器選擇器的限制
IE9及更早版本的IE瀏覽器每個(gè)樣式表中只支持4096個(gè)選擇器。組合樣式表和每個(gè)頁(yè)面中包含<style></style>的數(shù)量也受到了限制，最大只能31。在這個(gè)限制之后做的任何東西都會(huì)被瀏覽器給忽略掉。分割CSS，或者開(kāi)始重構(gòu)。我建議后者
作為一個(gè)有用的邊注，下面是瀏覽器計(jì)算選擇器的方法：
/* One selector */
.element { }
/* Two more selectors */
.element,
.other-element { }
/* Three more selectors */
input[type="text"],
.form-control,
.form-group > input { }
位置解釋
設(shè)置了position:fixed；的元素被放置在與瀏覽器窗口有關(guān)的地方。設(shè)置了position:absolute；的元素被放置在離與static（例如，relative,absolute,fixed）不同位置的父元素最近的地方。
位置和寬度
不要給已經(jīng)設(shè)置了position:[absolute|fixed];,left,right的元素設(shè)置width:100%。使用width:100%與使用left:0,right::0效果是一樣的。選擇使用其中一種，但別兩種都用。
定位與轉(zhuǎn)換
如果父元素設(shè)置了transform，那么position:fixed將不起作用。用transform創(chuàng)建一個(gè)新的包含塊，有效的強(qiáng)制父元素設(shè)置position:relative且固定元素的作用與position:absolute.一樣。
查看Demo和閱讀Eric Meyer's post on the matter
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。