编写html页面时常见的问题（转）

最新推荐文章于 2023-09-28 14:55:33 发布

weixin_34409703

最新推荐文章于 2023-09-28 14:55:33 发布

阅读量602

点赞数 1

原文链接：http://www.cnblogs.com/lianghong/p/8377263.html

版权

编写html页面时常见的问题（一）

说到写页面，肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题，那么在这里我总结一些经常遇到的小问题。希望能够帮助学习页面搭建的初学者！

虽然说ie6很多公司都已经抛弃，但是个人认为，初学者想要学好页面的搭建，典型的兼容性还是很有必要知道的！所以这里我就先说ie6的一个经典的兼容性问题！

ie6双边距问题

产生环境：当盒子外边距方向和浮动方向相同，在ie6浏览器中，一定会出现双倍边距问题

例如：css如下

 
       
            <style type= 
            "text/css" 
            > 
           

               
           
 
                 
            .chrome,.ie{ 
            width 
            : 
            100px 
            ; 
            height 
            : 
            100px 
            ; 
            background 
            :pink;} 
           
 
                 
            .ie{ 
            float 
            : 
            left 
            ; 
            margin-left 
            : 
            100px 
            ;} 
           
 
                 
            .chrome{ 
            margin-left 
            : 
            100px 
            ;} 
           
 
                 
            .clearfix{ 
            clear 
            : 
            both 
            ;} 
           
 
            </style> 
           
 
     

html如下

 
            <body> 
           
            <div style= 
            "margin:20px 0 0 20px;background:#ccc;height:500px;" 
            > 
           
            <div class= 
            "ie" 
            >ie 
            6 
            </div> 
           
            <div class= 
            "clearfix" 
            ></div> 
           
            <div class= 
            "chrome" 
            >高版本</div> 
           
            </div> 
           
            </body>

以上：类名为.ie的盒子不仅左浮动了，而且还使用左边的外边距；但是类名为.chrome的盒子只使用了外边距，并没有浮动；

在高版本浏览器预览的时，是没有问题的，如下：

但是如果在ie6下，同时使用浮动和外边距的盒子，并且方向相同的这个盒子就问出现双倍边距问题，如下：

这个就是双倍边距的问题！

解决办法：

在出现问题的盒子上加 _display:inline;这个属性，属性前面加上下划线，表示的是只有ie6去识别这个属性。

接下来就说说在ie浏览器中，一张图片假设有超级链接的话，在ie中显示的样式！

图片链接在ie中有边框

产生环境：给图片添加超级链接，并且有href属性

例如：一张图片不加超链接，一张图片加了超链接

 
       
            < 
            body 
            > 
           
 
            < 
            img  
            src="1.jpg" width="230" height="225" /> 
           
 
            < 
            a  
            href="#" class="chrome">< 
            img  
            src="1.jpg" width="230" height="225" /></ 
            a 
            > 
           
 
            </ 
            body 
            > 
           
 
     