首頁 > web前端 > css教學 > 十個實用且常用但是IE卻不支援的CSS屬性

十個實用且常用但是IE卻不支援的CSS屬性

巴扎黑
發布: 2017-04-05 11:28:58
原創
1708 人瀏覽過

對IE瀏覽器尤其是IE6的抱怨基本上已進入麻痺狀態,偶爾甚至產生非常消極的想法:這個世界只有一個瀏覽器就好了,即使這唯一的瀏覽器就是IE6。當然,這樣的想法是非常病態的,馬上打消。本文裡面,介紹了10個很實但IE卻不支援的CSS屬性,列出這些屬性並不是為了數落IE(數落也沒用),而是你了解了哪些CSS屬性是IE不支援的,就更有針對性的去寫CSS和Hack了。

1. Outline

在調試CSS問題的時候,我常常在指定元素上添加border來精確的查看該元素會發生什麼並幫助確定問題的來源。這常常是有效的,因為它可以在布 局上給我更具體的可視性。但如果是區塊級元素,這可能會發生某些錯誤-在任何區塊級元素上新增1px的邊框很可能會影響到佈局,它會讓這個元素的寬度額 外增加2px。

outline 屬性是完美的替代者,因為它可以在不影響文件流的情況下呈現該物件。但是IE6 和IE7 不支援 outline 屬性,所以,它不能在這兩個瀏覽器中用於調試。

2. Inherit (值)

# 在CSS開發中有很多這樣的例子:透過在特定元素上設定某些樣式來告訴該元素來「繼承」它父級元素的所有已新增的屬性,這樣你就可以避免相當多的鍵盤輸入。

這可以透過設定 inherit 來很容易的實現。這可能很有用。例如,重寫 background 屬性的時候,常常會有很多的文字在該屬性中(色彩、圖片的URL位址、位置等)。所以,與其重新寫這些值,你可能只是想要考慮中的元素和其父級元素有相同 的背景屬性,一個 inherit 值就可以搞定一切——這顯然大大的節省了鍵盤輸入。

不幸的是, inherit 值在IE6和IE7不被支援(除了用於 direction (文字方向) 和 visibility 屬性)。

某人說,程式碼就像女人的裙子——越短越好,看來IE會阻礙我們這個願望的實現。

3. Empty-Cells

此屬性只用於table或”display”屬性被設定為”table-cell”的元素。如果你動態的為一個table添加內容,就可能會遇到某個單元格的內容為空的情況,然後你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉。

使用”empty-cells: hide”就能解決這個問題,它會將可能出現這種情況的單元格完全隱藏掉。

Internet Explorer 不支援empty-cells屬性。

4. Caption-Side

說到table 的屬性,這個屬性用來聲明顯示在表格的側邊欄的表格標題。它接受 top 、 bottom 、 left 和 right 四個值。 Internet Exporer 不支援這個屬性,table的標題在IE6和IE7中將總是出現在表格的頂部。

5. Counter-Increment / Counter-Reset

# 有序列表(

    )非常方便,因為它可以省去你手工添加遞增數字的麻煩,而且它允許你不用更改數字就能改變列表的序列。

    CSS 擁有 counter-increment 和 counter-reset 屬性,它允許你用來自動產生遞增數字到幾乎所有的html元素上,就像有序列表的效果一樣。

    這裡有個範例:

    h2 {counter-increment: headers;}
    h2:before {content: counter(headers) ". ";}
    登入後複製

    上面的樣式將在所有的

    標籤前面自動添加遞增的數字,而且允許你在h2標籤上實現和li標籤相同的效果。

    但是IE6, IE7 甚至Safari(直到3.x版本)還不支援這些屬性。當然,IE6也不支援:before 偽元素。

    6. Min-Height

    有時,網站的設計或佈局結構需要一個固定高度的內容區域,否則特定的視覺效果就會失去。這可能會因為一個漸變背景、一個獨特的下拉列表、 或者可能是因為PS出來的很酷的發光效果。但是有的時候,頁面中的內容會比較多,而頁面卻不能像預期那樣展開。

    這時候就需要用到 min-height 屬性了,因為它可以告訴瀏覽器在一個特定的區塊級元素上渲染最小的高度,不管內容的實際高度是否達到了這個最小高度。然後呢,如果內容超出了最小高度,該元素就會適度的擴展開。

    使用min-height 唯一需要注意到的是它在IE6中不被支援。我們都知道IE6在(緩慢的)退出歷史舞台,但是有的客戶可能仍然要求他們的網站支援這個該死的瀏覽器。

    不過令人高興的是,IE6 渲染height 的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣,所以你只需要一個針對IE6的hack或獨立的樣式表來為該元素添加特定的height ,這個問題就解決了。

    IE6 同樣無視 min-width 、 max-height 和 max-width , 但是上述方法在這些屬性上也是可行的。

    7. :hover

    从技术上来说,:hover只是一个伪类,但是它在IE6中不被支持(IE7和IE8支持)。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用,可以避免(至少在某种程度上)使用javascript。

    但是如果你的网站,需要完全支持IE6,特别是在中国这种IE6一手遮天的情况下,那么你就必须考虑取消使用这个伪类,除非相关的标签有个”href”属性,比如标签。而且如果要实现这种效果,可能必须借助于javascript和额外的样式。

    8. Display

    Display 通常被设置为这三个值中的一个: block、inline和 none。“得益于”IE,Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等,这些属性对于解决一些特殊的布局问题时,是很有用的。

    所以,尽管IE 确实支持Display的这三个基本属性,但是它基本上不支持其它属性。

    其实,IE8对display的属性支持已经相当完整了。不过,对于inline-block属性,IE6/7只支持本身为inline的元素。

    9. Clip

    这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说,这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为,在一个绝对定位的元素中,按照一定的设置来裁剪该元素的显示区域,超出该区域的内容会被隐藏掉。语法看起来像这样的:

    修剪只能用于一个绝对定位的元素,而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域,该区域以外的内容不可见或者被剪切掉。

    技术上来讲, clip 属性被IE支持,但是只支持无逗号的语法,比如

    上面的样式(rect后面括号里的属性没有用逗号隔开)在大多数浏览器下都可运行,但是可能不会通过CSS验证,因为语句没有用逗号隔开。

    10. :focus

    这是另外一个伪类需要在这里被提及的,因为所有的非IE浏览器,都支持这个属性。:focus伪类允许你声明一个特别的样式,当一个页面元素成为键 盘(鼠标)焦点的时候,将该样式动态的应用到该元素上。这在表单元素上非常有用,因为你可以在一个输入框被选中的时候给它添加一个边框。

    下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框:

                   

    以上是十個實用且常用但是IE卻不支援的CSS屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板