HTML兼容问题小结

小咪咪 2022-08-21 11:53 208阅读 0赞

1.  标准浏览器子元素不会撑开父元素设置好的宽度，IE6下会的；
    
        <style>
        .box{ width:400px;}
        .left{ width:200px;height:300px;background:red;float:left;}
        .right{ width:200px;float:right;}
        .div{width:180px;height:180px;background:blue;padding:15px;}
        </style>
        </head>
        <body>
        <div class="box">
        	<div class="left"></div>
            <div class="right">
            	<div class="div"></div>
            </div>
        </div>
        </body>
    
    ![Center][]  
    
2.      <style>
        .box{ width:400px;}
        .left{background:red;float:left;}
        .right{float:right; background:blue;}
        h3{margin:0;height:30px; <span style="color:#ff0000;"><strong><em>float:left;</em></strong></span> }
        /*
        	在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
        */
        </style>
        </head>
        <body>
        <div class="box">
        	<div class="left">
            	<h3>左侧</h3>
            </div>
            <div class="right">
            	<h3>右侧</h3>
            </div>
        </div>
        </body>
    
    ![Center 1][]
3.      <style>
        .left{width:100px;height:100px;background:Red; float:left;}
        .right{width:200px;height:100px;background:blue;(margin-left:100px;)<span style="color:#ff0000;"><em><strong>float:left;</strong></em></span>}
        /*
        	在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动（本问题为3pxBUG）
        */
        </style>
        </head>
        <body>
        <div class="box">
        	<div class="left"></div>
            <div class="right"></div>
        </div>
    
    ![Center 2][]
4.  IE6下，最小高度为19px;解决办法：overflow:hidden;
5.  IE 6下，1px dotted \#000不支持，解决办法：切背景平铺；
6.      <style>
        body{margin:0;}
        .box{background:blue;border:1px solid #000;<span style="color:#ff0000;"><strong><em>zoom:1;</em></strong></span>}
        .div{width:200px;height:200px;background:red;margin:100px;}
        /*
        	在IE6下解决margin传递要触发haslayout（解决：<span style="font-family: Arial, Helvetica, sans-serif;">zoom:1;</span>）	
        	在IE6下父级有边框的时候，子元素的margin值消失
        	
        	解决办法:触发父级的haslayout
        */
        </style>
        </head>
        <body>
        <div class="box">
        	<div class="div"></div>
        </div>
    
    ![Center 3][]
7.      <style>
        body{margin:0;}
        .box{width:200px;height:200px;background:Red;float:left;margin:100px;}
        /*
        	IE6下双边距BUG
        	在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍	
        	解决办法: <span style="color:#ff0000;"><em><strong>display:inline;</strong></em></span>
        */
        </style>
        </head>
        <body>
        <div class="box"></div>
        </body>
    
        <style>
        .box{ float:left;border:10px solid #000;}
        .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}
        /*
        	margin-right 一行右侧第一个元素有双边距（margin：第一个元素左侧，最后一个右侧有双边距）
        	margin-left 一行左侧第一个元素有双边距
        */
        </style>
        </head>
        <body>
        <div class="box">
        	<div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
8.      <pre name="code" class="html"><style>
        ul{margin:0;padding:0;width:302px;}
        li{ list-style:none;height:30px;border:1px solid #000; <strong><em><span style="color:#ff0000;">vertical-align:top;</span></em></strong>}
        a{width:100px;float:left;height:30px;background:Red;}
        span{width:100px;float:right;height:30px;background:blue;}</style><pre name="code" class="html"><body><ul><li>
            <span>	</span><a href="#"></a>
                <span></span>
            </li><li>
            <span>	</span><a href="#"></a>
                <span></span>
            </li>
        </ul>
        </body>
        	/*在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
        	解决办法:
        		1.给li加浮动，还需要加宽度width:300px;
        		2.给li加vertical-align,,,,,当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动*/

![Center 4][]

10. IE6下的文字溢出BUG

![Center 5][]

11.

![Center 6][]

12.

![Center 7][]

13.

14.透明度；opacity:0~1;filter:alpha(opacity=0~100);

15.

![Center 8][]

16.css hack不建议使用

![Center 9][]

17. !important 提升优先级

![Center 10][]

18.圣杯布局：左右宽度固定，中间宽度自适应伸缩，并且中间先加载

style>
    body{margin:0;}
    .center{height:600px;background:#f60;margin:0 200px;}
    .left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}
    .right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}
    </style>
    </head>
    <body>
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
    </body>

等高布局：

![Center 11][]

19. img外部的border

产生条件：img外部有a标签，即img标签有链接时

解决办法：设置img边框border:0;

20.图片默认有边距

产生条件：img标签（每个img之后敲了回车）

解决办法：为img设置float的浮动布局方式。

[Center]: /images/20220724/683f9f8b29a74b75a55b1d55b5fd9941.png
[Center 1]: /images/20220724/2099874bf0dc4d86b32ded123f61b852.png
[Center 2]: /images/20220724/5220fe09799140058bd4387b42a9f5d9.png
[Center 3]: /images/20220724/a6ab7a43cd4a4297908e2249c6877999.png
[Center 4]: /images/20220724/eb7147cedc4e4fe59423a553865aeb31.png
[Center 5]: /images/20220724/f7fb41fcffde490997580161412a0c92.png
[Center 6]: /images/20220724/65b83d87271f43f981a3717d68dfd2ca.png
[Center 7]: /images/20220724/6c62fe2e507b4589811c5ec4aac00aae.png
[Center 8]: /images/20220724/97010208e3c14e00ae29c69d124f41b9.png
[Center 9]: /images/20220724/31a1697472f3401797237ced02508ed2.png
[Center 10]: /images/20220724/e6fdbd59b0a34b1ba68ef45e2a9deacf.png
[Center 11]: /images/20220724/967a40b131a144d391fee7de431379a1.png