DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 淺析十個IE不支持的CSS樣式屬性
淺析十個IE不支持的CSS樣式屬性
編輯:CSS詳解     

對於有些CSS樣式屬性,IE並不支持。掌握這些不支持的屬性,我們就可以在今後的網頁設計中,避開這些CSS樣式屬性。

今天的這篇文章主要講了:IE6對一些CSS樣式屬性的不支持。了解IE6不支持哪些屬性,我們就可以根據浏覽器有針對性的去寫CSS樣式代碼和hack了。 

1.outline屬性:

outline(輪廓)是繪制於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline屬性是一個簡寫屬性,用於設置元素周圍的輪廓線。

注釋:輪廓線不會占據空間,也不一定是矩形。我認為outline屬性好就好在,字不占據任何的空間。outline的作用就像border一樣也是為了突出某個元素,但是如果是某些塊及元互的話,如果加border的話,整體的寬度會增加2px. 因為outline不支持IE浏覽器,所以我們經常用borde屬性。

2. Inherit (值)屬性:

inherit故名思意是“繼承”的意思。所以它所表達的值也是繼承相關的了。
通過在特定元素上設置某些樣式來告訴該元素 “繼承”它父級元素的所有已添加的屬性,這樣你就可以避免相當多的鍵盤輸入。
這可以通過設置 inherit 來很容易的實現。比如,當重寫 background 屬性的時候,常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以,與其重新寫這些值,你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性,一個 inherit 值就可以搞定一切——這顯然大大的節省了鍵盤輸入。
給大家一個簡單的inherit 小實例你會很明白了:

  1. <Html><style>
  2. body { color: red; background: green ;}
  3. h1 { color: yellow; background: blue ;}
  4. p {color: white ; background: black ;}
  5. em {color: inherit ;} /*這個"繼承"是默認的,可以不寫*/
  6. </style><body>
  7. <h1>aaa <em>繼承的文字</em> aaa</h1>
  8. <em>繼承的文字</em>
  9. <p>P中間的文字</p>
  10. <em>繼承的文字</em>
  11. </body></Html>

很可惜的是inherit 值在IE6和IE7不被支持(除了用於 direction (文字方向) 和 visibility 屬性)。

3.Empty-Cell屬性

empty-cells屬性設置是否顯示表格中的空單元格(僅用於“分離邊框”模式)。

注釋: IE浏覽器不支持此屬性。

繼承性:Yes

Empty-Cell屬性的兩個值:

hide 默認。不在空單元格周圍繪制邊框。

show 在空單元格周圍繪制邊框。

實例如下:table{ empty-cell:show; }

該屬性只用於table或者”display”屬性被設置為”table-cell”的元素。如果你動態的為一個table添加內容,就可能會遇到某個單元格的內容為空的情況,然後你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉, ”empty-cells: show”解決這一問題。相反可以用”empty-cells: hide”它會將會使單元格完全隱藏掉。

4.Caption-Side屬性

設置或檢索表格的caption對象是在表格的那一邊。它是和caption對象一起使用的屬性
說到table 的屬性,這個屬性用於聲明顯示在表格的側欄的表格標題。它接受 top 、 bottom 、 left 和 right 四個值。

CSS樣式示例:

  1. table caption { caption-side: top; width: auto; text-align: left; }

原文標題:10個IE不支持的CSS樣式屬性詳解(一)

鏈接:http://www.cnblogs.com/listly/archive/2009/09/18/1569471.Html

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved