BoxModel盒模型bug的一般解決辦法_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們定義一個最基本的層boxtest：
標(biāo)準(zhǔn)情況下，這個盒的寬度是:20 30 300 30 20=400px。
但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個bug，它認(rèn)為300 px是整個盒的總寬度，內(nèi)容的寬度變成：300-20-30-20-30=200px。
為了彌補(bǔ)這個bug，采用一個技巧：即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續(xù)閱讀，認(rèn)為寬就是400px，但而其他符合標(biāo)準(zhǔn)的瀏覽器會繼續(xù)閱讀，并執(zhí)行第二個真實(shí)值300px。
同樣，在Opera7.0以前的瀏覽器也有這樣的解析bug。但我們并不需要使用偽值，有更簡單的辦法解決這個問題： html>body .content { width :300; }
示例代碼 [www.hl5o.cn]
#boxtest{
border:20px solid #60A179;
padding: 30px;
background : #ffc;
width : 400px;
}
border:20px solid #60A179;
padding: 30px;
background : #ffc;
width : 400px;
}
標(biāo)準(zhǔn)情況下，這個盒的寬度是:20 30 300 30 20=400px。
但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個bug，它認(rèn)為300 px是整個盒的總寬度，內(nèi)容的寬度變成：300-20-30-20-30=200px。
為了彌補(bǔ)這個bug，采用一個技巧：即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續(xù)閱讀，認(rèn)為寬就是400px，但而其他符合標(biāo)準(zhǔn)的瀏覽器會繼續(xù)閱讀，并執(zhí)行第二個真實(shí)值300px。
示例代碼 [www.hl5o.cn]
#boxtest{
border:20px solid #60A179;;
padding:30px;
background: #ffc;
width :400px;
voice-family : "\"}\"";
voice-family :inherit;
width : 300px;
}
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; }
相關(guān)CSS教程：
- 相關(guān)鏈接：
- 教程說明：
CSS教程-BoxModel盒模型bug的一般解決辦法
。