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聲明方式 

<!DOCTYPE html>

　　不聲明doctype會導致畸形的表單、輸入框和其它的一些問題；且會讓頁面在quirk mode下顯示。

　　Box Model的計算問題

　　當元素定義了padding和border-width中的1個或2個后，你設置的width值會變得比實際的大。為了避免這個問題的發(fā)生，現(xiàn)在就用box-sizing: border-box;這種通過的方法來重新設置。

　　Rem單位和Mobile Safari

　　雖然Mobile Safari支持使用rem的所有屬性值時。但當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;
  }
}

　　求助！如果你有蘋果或WebKit關于這方面的錯誤報告，我很樂意將它放到本文中。由于它只適用于移動應用，不適用于桌面程序，Safari瀏覽器（非Mobile Safari），我不確定在哪里會報告這個錯誤。

　　浮動（float）排在第一

　　在文檔順序中，浮動的元素應該總是放在第一。浮動的元素需要一些東西來環(huán)繞，否則其順序會下降，在內容之下顯示。 

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

　　浮動（float）和清除浮動（clear）

　　如果你使用浮動,很可能你需要使用清除浮動。任何跟著浮動元素的內容均會環(huán)繞著浮動元素，除非使用清除浮動。你可以使用以下的方法來清除浮動。

　　micro clearfix方法通過使用單獨的類來清除浮動 

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

　　或者，在parent中用auto 或 hidden 來指定overflow。 

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

　　考慮到overflow可能會產生意想不到的副作用，在parent中將其以特別的方式標注在定位元素旁。

　　專業(yè)意見！當清除浮動由于其它原因能作為屬性使用時，通過像/* clearfix */ 這樣的注釋能讓你把握自己的未來，且能讓你的同事高興。

　　浮動和計算高度

　　一個只有浮動內容的父元素將有一個計算的高度值height: 0;。給父元素加clearfix，強制瀏覽器計算一個高度值。

　　浮動元素是塊級元素

　　用了float的元素會自動地變成display: block;沒有必要兩個屬性都設置，因為float會覆蓋你的display。 

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

　　有趣的事實：幾年前，我們必須要設置display: inline;，讓大多數(shù)的浮動元素能夠兼容IE6，避免雙倍margin值的bug,。不管怎樣，那些日子早已過去了。

　　垂直相鄰margin的倒塌

　　相鄰元素（一個接一個地）的頂部和底部的margin可能會在很多情況下倒塌，但對于浮動元素或絕對定位的元素絕不會出現(xiàn)這樣的情況。閱讀這篇MDN文章或CSS2規(guī)范里的collapsing margin章節(jié)來了解更多東西吧。

　　水平相鄰的margin永遠不會倒塌。

　　設計表單的行

　　表單的行，<tr>，不要接收border，除非你在父<table>上設置了 border-collapse: collapse;。此外，如果<tr>和子<td>或<th>有同樣的border-width，表單行的border將不起作用。點鏈接查看示例。

　　Firefox和<input>按鈕

　　由于一些未知原因，F(xiàn)irefox能提交line-height和適用不能被自定義CSS覆蓋的<input>按鈕。

　　你可以通過以下兩種方法解決這個問題：

　　1. 堅持使用<button>元素

　　2. 在你的按鈕中不要使用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瀏覽器打開鏈接來看看原始的問題和解決方案。

　　好消息！這個問題在Firefox30中似乎被解決了。對于我們以后的使用來說這是個好消息。但值得注意的是這個問題僅在新版本中得到解決，舊版本的問題并未得到解決。

　　Firefox按鈕的內部輪廓

　　Firefox用：focus給按鈕（<input>和<button>）增加了一個內部輪廓。顯然，這是為了其可訪問性做的，不過它的位置似乎相當怪異。用以下這段CSS來覆蓋它： 

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

　　你可以通過前一章節(jié)提到的例子中查看這個解決方案。

　　專業(yè)意見！一定要在按鈕、鏈接和輸入元素中包含一些焦點狀態(tài)。提供可訪問功能是至關重要的，對于用tab鍵來選擇內容的專業(yè)用戶亦是如此。

　　始終在<button>上設置type

　　默認值是submit，意味著表單內的button都可以提交表單。所有type=”button”的元素勻不會提交表單，type=”submit”的元素則會提交表單。 

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

　　在應用中，如果在表單外使用button就使用type=”button”。 

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

　　有趣的事實：顯然IE7不能很好的支持button的value屬性。如果不看屬性內容的話，innerHtml（<button>標簽之間的內容）可以彌補這個問題。然而，由于IE7的使用率已經(jīng)下降和給<button>設置value及innerHtml似乎極少見這兩個原因讓我覺得這并不是一個很值得關注的問題。

　　IE瀏覽器選擇器的限制

　　IE9及更早版本的IE瀏覽器每個樣式表中只支持4096個選擇器。組合樣式表和每個頁面中包含<style></style>的數(shù)量也受到了限制，最大只能31。在這個限制之后做的任何東西都會被瀏覽器給忽略掉。分割CSS，或者開始重構。我建議后者

　　作為一個有用的邊注，下面是瀏覽器計算選擇器的方法： 

/* 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）不同位置的父元素最近的地方。

　　位置和寬度

　　不要給已經(jīng)設置了position:[absolute|fixed];,left,right的元素設置width:100%。使用width:100%與使用left:0,right::0效果是一樣的。選擇使用其中一種，但別兩種都用。

　　定位與轉換

　　如果父元素設置了transform，那么position:fixed將不起作用。用transform創(chuàng)建一個新的包含塊，有效的強制父元素設置position:relative且固定元素的作用與position:absolute.一樣。

　　查看Demo和閱讀Eric Meyer's post on the matter

　　原文：wtfhtmlcss.com

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。