您的位置：首页 > 其它

inline-block 在什么情况下可以使用？

2013-09-02 23:07 239 查看

序言

在css中，inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。轻松使用inline-block属性

浏览器兼容性

ChromeFirefox 3 +OperaIE 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的宽度了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航