HTML和CSS是什麼玩意兒？

ourjs發表於2014-03-27
HTMLCSS

　　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值會變得比實際的大。為了避免這個問題的發生，現在就用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）排在第一

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

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

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

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

　　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中將其以特別的方式標註在定位元素旁。

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

　　浮動和計算高度

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

　　浮動元素是塊級元素

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

.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>元素很好），以下是你需要知道的：

<!-- 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;
}

　　你可以通過前一章節提到的例子中檢視這個解決方案。

　　專業意見！一定要在按鈕、連結和輸入元素中包含一些焦點狀態。提供可訪問功能是至關重要的，對於用tab鍵來選擇內容的專業使用者亦是如此。

　　始終在<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的使用率已經下降和給<button>設定value及innerHtml似乎極少見這兩個原因讓我覺得這並不是一個很值得關注的問題。

　　IE瀏覽器選擇器的限制

　　IE9及更早版本的IE瀏覽器每個樣式表中只支援4096個選擇器。組合樣式表和每個頁面中包含<style></style>的數量也受到了限制，最大隻能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）不同位置的父元素最近的地方。

　　位置和寬度

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

　　定位與轉換

　　如果父元素設定了transform，那麼position:fixed將不起作用。用transform建立一個新的包含塊，有效的強制父元素設定position:relative且固定元素的作用與position:absolute.一樣。

　　檢視Demo和閱讀Eric Meyer's post on the matter

　　原文：wtfhtmlcss.com

相關文章