content
div.content{border:20px solid #60A179;; padding:30px;background: #ffc;width :400px;voice-family : "/"}/"";voice-family :inherit;width : 300px;}
本文來自:tantek.com
我們定義一個最基本的層:
div.boxtest{ border:20px solid #60A179;padding: 30px;background : #ffc;width : 400px;}
標準情況下,這個盒的寬度是:20 30 300 30 20=400px。
但是在IE5.0瀏覽器中,對盒模型的寬度解釋有個bug,它認為300 px是整個盒的總寬度,內容的寬度變成:300-20-30-20-30=200px。
為了彌補這個bug,采用一個技巧:即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續閱讀,認為寬就是400px,但而其他符合標準的瀏覽器會繼續閱讀,并執行第二個真實值300px。
div.content{border:20px solid #60A179;; padding:30px;background: #ffc;width :400px;voice-family : "/"}/"";voice-family :inherit;width : 300px;}
同樣,在Opera7.0以前的瀏覽器也有這樣的解析bug。但我們并不需要使用偽值,有更簡單的辦法解決這個問題: html>body .content { width :300; }
新聞熱點
疑難解答