inline-block 在什麼情況下可以使用?

序言

在css中,inline-block:將對象呈遞爲內聯對象,但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。

輕鬆使用inline-block屬性輕鬆使用inline-block屬性



瀏覽器兼容性

Chrome 

Firefox 3 +

Opera

IE 8 +

IE6,IE7 只支持特定標籤的inline-block,比如a,span標籤,需要正確使用inline-block


環境

FF2不支持該屬性,好在FF2在中國市場並不流行,即使有大家使用FF3,所以問題不存在了,需要跨瀏覽器兼容性,而且簡單,只要牢記一句話,只對a,span標籤使用該屬性,應該就可以兼容當前主流瀏覽器了,而且簡單好用,不需要做什麼修正。
span{
    display:inline-block;

}

使用環境

在很多情況下,我們需要設置span的寬度,但是在inline下,width是沒有效果的,我們要設置span的寬度,就需要使用該屬性。

<html>
        <head>
                <style>
                        
                        span{
                                display:inline-block;
                                width:100px;
                        }
                </style>
        <head>
        <body>
                <div>
                        <span>11</span>
                        測試數據1
                <div>
                <div>
                        <span>111111</span>
                        歡迎到我的itbug.baike.com 進行投票
                <div>
                
                
        </body>
</html>

上述代碼在IE6,IE7,FF9,Chrome,IE8下都經過測試,得到了預期的效果。

結論

以前總是擔心inline-block的兼容性問題,現在可以放心大膽的使用,不用看網上搜索到的解決方法,一行代碼的事完全可以解決生產環境中的所有問題,我們很容易可以設置span的寬度了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章