ie6下面层边框断裂

    1
    64

    ie6.0下面经常会出现border边框断断续续的问题,初学div+css 的一般不会用遇到这个问题,不过等深一步了解了div之后自然会经常碰到这种问题了,因为初学者不会偷懒,等我们觉得用的很熟了,各种浏览器都能很方便的兼容之后就会出现这种问题,我有很多同事都碰到过这种问题,其实解决办法很简单,我先简单描述一下边框断裂的效果:
    border broken 边框断裂
    在浏览器下一刷新边框是全的,再以刷新边框就会有断开,什么原因呢,很懊恼的事情,网上一搜也没有答案,下面我就告诉大家解决的方法,其实他是有原因的,原因就是你的外层有边框,边框层里面嵌套的层里面有浮动,浮动这个最令人懊恼的东西经常会出问题,由于这个原因会引起ie6下面边框断裂,解决办法就是在外层加 zoom:1; 或者 heigth:100%; 很容易就解决了这个问题。

    div+css还存在许多浏览器不兼容的现象,我就简单把不常见的现象总结一下,以供浏览者,广大爱好者欣赏,为广大div+css爱好者提供一个好的平台。

    关于 ZOOM:1 的相关阅读:

    来自:http://audi.tw/Blog/CSS/css.zoom.filter.alpha.opacity.asp

    IE 透明度失效和 zoom:1 有關?

    看到我把標題槓掉,就知道這又是一個以訛傳訛的消息!

    之前有人在問 zoom 的功用,果然又是和雅虎佈落格有關係,據說,如果沒有加上 zoom:1 的話,filter:alpha(opacity) 會失效!

    真正重點是:filter 濾鏡可以進行許多視覺化效果,不過 filter 效果多半只能套用在指定區塊中(例如指定寬及高),來看例子:

    使用 filter 透明度效果

    正常來說,效果應該是:

    001

    但這個例子在 IE 中的效果卻是:

    002

    加個 zoom:1 看看:

    使用 filter 透明度效果

    003

    如果不加 zoom:1 改用 width:100% 看看:

    使用 filter 透明度效果

    003

    所以,使用 zoom:1 或 width:100% 對 IE「啟用」filter 都有效,主要原因是在於 filter 套用到物件上時,物件必需是「有形體」,再講簡單點,必需「明確知道套用範圍」,這在 IE 中稱為 layout,同時 IE 支援 hasLayout 這個屬性,妙的地方是 hasLayout 這個屬性沒 HTML 寫法,也就是只能使用 JavaScript / JScript 來驅動,使這個屬性變成啟動或不啟動。當 hasLayout 為 true 時,filter 的效果才能產生。

    雖然 hasLayout 並沒有 HTML 語法可以驅動,不過某些 CSS 屬性一旦被指定,hasLayout 自動調整為 true,這些 CSS 屬性是:

    屬性名稱 啟動 hasLayout 的值 取消 hasLayout
    display inline-block
    width / height 除了 auto 外任何值 auto
    position absolute static
    float left 或 right none
    zoom 有就好 normal 或空值

    所以,zoom:1 只是用來驅動 hasLayout 屬性的一種方法而已,那重點來了,使用 filter 的下場,看看這個例子:

    使用 filter 前,要把物件 render 成 layout
    使用 filter 前,要把物件 render 成 layout

    結果如:004

    正常情況應是:005

    這裡強調一下,我用的字型是「微軟正黑體」,在 Vista 作業系統中是內建字型,只不過 IE7 並未內建指定使用微軟正黑體。這類圓滑字,一旦被 render 成 layout,下場就上圖所示!這時深底色就影響不大!

    1 COMMENT

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here