相容的網頁寬度margin padding

2021-09-07 01:28:35 字數 1589 閱讀 4919

hack相容:

-moz-  /* firefox 4 */

-webkit- /* safari 和 chrome */

-o-  /* opera */

ie6承認*和_和+,不承認!important

ie7識別*和+,不識別_,識別!imortant

而firfox兩個都不識別,識別!important

selector

當然。還有專門針對ie7的寫法:+background-color:#00f;

之前對css hack做過乙個簡單的彙總《css hack 彙總》,如今進行一些更新:

「\9「  僅僅在ie6/ie7/ie8/ie9/ie10下生效

「\0」  僅僅在 ie8/ie9/ie10下生效

「\9\0」僅僅在ie9/ie10下生效

故眼下假設須要僅僅針對ie8的hack,可先使用在ie8/ie9/ie10生效的「\0」,再用僅在ie9/ie10生效的「\9\0」hack覆蓋之前的樣式。 如

selector

框架用990,非框架用1000

1、設了float:left的元素同意它的右邊存在不論什麼元素同行顯示。不論是內聯元素還是塊元素。但它的左邊還是不同意存在不論什麼元素與之同行顯示,哪怕其他的元素的**在前,除非也給前面的元素加上float:left後,才同意同行顯示。

設了display:inline的元素,同意它的前後存在其他的內聯元素同行顯示。關於**在其前面的塊元素之同行顯示,則要讓前面的元素浮動(無論是左還是右浮動)或設為display:inline。還有**在後面的是塊元素(管它有沒有浮動,是左浮動還是右浮動),均不能與之同行,除非設為display:inline。

另外,給塊級元素設上display:inline是解決有名的ie6中雙倍浮動的利器。

2、float 能使塊級元素變成行間元素!

3、.行間元素僅僅有左右外邊距。無上下外邊距,且左右外邊距不會合併!僅僅有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

4、ie6對box理解的差異導致設為float的div在ie下margin的值會加倍(塊級元素margin都會加倍,且float方向和margin同方向時)。如:

#box

//這樣的情況之下ie會產生100px的距離

解決方法例如以下:

#box

//僅僅需給其加display:inline屬性使使浮動忽略。就可以解決

5、float元素的寬度之和要小於100%

6. float元素務必指定width屬性

非常多瀏覽器在顯示未指定width的float元素時會有bug。所以無論float元素的內容怎樣。一定要為其指定width屬性。

另外指定元素時盡量使用em而不是px做單位。

7. float元素不能指定margin和padding等屬性

ie在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(能夠在float元素內部巢狀乙個div來設定margin和padding)。也能夠使用hack方法為ie指定特別的值。

8、padding:新增padding值會增加整體尺寸

網頁相容網頁寬度margin padding

hack相容 moz firefox 4 webkit safari 和 chrome o opera ie6識別 和 和 不識別 important ie7識別 和 不識別 識別 imortant 而firfox兩個都不識別,識別 important selector 當然,還有專門針對ie7的寫...

設定網頁最小最大寬度和高度(相容IE6)

最小寬度 min width min width 300px sets max width for ie width expression document.body.clientwidth 300 300px auto 最大寬度 max width max width 600px sets max...

設定網頁最小最大寬度和高度(相容IE6)

最小寬度 min width 最大寬度 max width 最小高度 min height 最大高度 max height 最大最小寬度 min and max width 最大最小高度 min and max height 這裡是結合css和其支援的expression實現的,示例 如下 控制的最...