Html基礎(chǔ)知識(shí)學(xué)習(xí)——兼容問題與解決方法
1.計(jì)算一定要精確，不要讓內(nèi)容的寬高超出我們?cè)O(shè)置的寬高，在IE6下內(nèi)容會(huì)撐開設(shè)置好的寬高
.box {
width: 400px;
}
.left {
width: 200px;
height: 300px;
background: red;
float: left;
}
.right {
width: 200px;
float: left;
background-color: aqua;
}
.div {
width: 180px;
height: 180px;
background: rgb(49, 49, 185);
padding: 15px;
}<div class="box">
<div class="left"></div>
<div class="right">
<div class="div">
</div>
</div>
</div>
2.元素浮動(dòng)，寬度需要內(nèi)容撐開，就給里面的塊元素都加浮動(dòng)
.box1 {
width: 400px;
}
.left1 {
background: red;
float: left;
}
.right1 {
background: blue;
float: right;
} <div class="box1">
<div class="left1">
<h3>左側(cè)</h3>
</div>
<div class="right1">
<h3> 右側(cè)</h3>
</div>
</div>3.在ie6.ie7下元素要浮動(dòng)并在同一行 就給這些元素都加浮動(dòng)
.div1{width: 100px;height: 100px;background: red;float: left;}
.div2{width: 200px;height: 200px;background: blue;float: left;} <div class="div1"></div>
<div class="div2"></div>4.注意標(biāo)簽嵌套規(guī)范
p{width: 100px;height: 100px;background-color: aquamarine;} <p>
<h3></h3>
</p>5.IE6下元素高度小于19px的時(shí)候。會(huì)被當(dāng)做19px來處理
解決方法：overflow:hidden
6. border:1px dotted 在IE6下不支持
解決辦法：切背景平鋪
7.解決margin傳遞到父級(jí)問題
解決方法： 1.父級(jí)加浮動(dòng) float:left 2.父級(jí)加overflow: hidden;（IE6下不兼容） 3.IE6下觸發(fā)haslayout 4.父級(jí)有邊框的時(shí)候，子元素的margin值消失
.div3{ background-color:brown;border: 1px solid #000; }
.div4{width: 200px;height: 200px;background-color: aquamarine;margin: 100px;} <div class="div3">
<div class="div4"></div>
</div>8.在IE6下，塊元素同時(shí)有浮動(dòng)、橫向margin值時(shí)，橫向的margin值會(huì)被放大兩倍:
margin-right 一行右側(cè)第一個(gè)元素有雙邊距 margin-left 一行左側(cè)第一個(gè)元素有雙邊距 解決方法：display:inline;
.div5{ float: left;border:10px solid #000}
.div5 div{width: 100px;height: 100px;background: red;margin: 0 20px;border: 5px solid #ccc;float: left;} <div class="div5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>9.在IE6,7下li本身沒浮動(dòng)，但是li內(nèi)容有浮動(dòng)，li下邊就會(huì)產(chǎn)生一個(gè)間隙
解決辦法： 1.給li加浮動(dòng) 2.給li加vertical-align
10在IE6,7下最小高度問題和li間隙問題同時(shí)存在的時(shí)候給li加浮動(dòng) float：left overflowe:hidden
11.在IE6,當(dāng)一行子元素占有寬度之和和父級(jí)的寬度相差超過3px,或有不滿行狀態(tài)最后一行的子元素下的margin在IE6下會(huì)失效
12.IE6下文字溢出：子元素的寬度與父級(jí)的寬度相差小于3px的時(shí)候或兩個(gè)浮動(dòng)元素中間有注釋或者內(nèi)嵌元素
解決方法：用div把注釋或者內(nèi)嵌元素用div包起來
13.當(dāng)浮動(dòng)元素和絕對(duì)定位元素是并列關(guān)系的時(shí)候，在IE6下絕對(duì)定位元素會(huì)消失
解決辦法：給絕對(duì)定位元素外面包div
<div class="div6">
<ul></ul>
<div>
<span></span>
</div>
</div>.div6{width: 200px;height: 200px;border: 1px solid #000;position: relative;}
span{width: 50px;height: 50px;background: yellow;position: absolute;right: -20px;top :0;}
ul{width: 150px;height: 150px;background: red;margin: 0 0 0 50px;padding: 0;float: left;display: inline;}14 在IE6、7下，子元素有相對(duì)定位的話，父級(jí)的overflower包不住子元素
解決辦法：給父級(jí)也加相對(duì)定位
.div14{width: 200px;height: 200px;border: 1px solid #000;overflow: auto;position: relative;}
.div141{width: 150px;height: 300px;background: yellow;position: relative;} <div class="div14">
<div class="div141"></div>
</div>15在IE6下絕對(duì)定位元素的父級(jí)寬高是奇數(shù)的時(shí)候，元素的right值和bottom值會(huì)有1px的偏差
16.IE6下不支持絕對(duì)定位
17.IE6下同時(shí)給tbody、tr同時(shí)背景賦值，那么tbody的背景值會(huì)消失
18.IE6、7下輸入類型的表單控件上下各有1px的間隙
解決辦法：加浮動(dòng)
19.在IE6、7下輸入類型的表單控件加border:none;無效
解決辦法：重置input的背景
20在IE6、7下輸入類型的表單控件輸入文字的時(shí)候，圖片背景會(huì)跟著一塊移動(dòng)
解決方法：把背景加給父級(jí)，并且清掉輸入表單的背景
文章來源：http://www.zghlxwxcb.cn/news/detail-568264.html
.div18{width: 100px;height: 30px;border: 1px solid red;background: url(ball.png) no-repeat; }
input{width: 100px;height: 30px;border: none;margin: 0;padding: 0;background: none;} <div class="div18">
<input type="text">
</div>21 在IE6 下在important后面加一條同樣的樣式，會(huì)破壞掉important的作用，會(huì)按照默認(rèn)的優(yōu)先級(jí)順序來走 。 樣式默認(rèn)優(yōu)先級(jí)順序：默認(rèn)<類型<class<id<style(行間)<important
22 IE6下不支持 png 添加DD_belatedPNG_0.0.8a.js 引用 DD_belatedPNG.fix方法 實(shí)現(xiàn)透明度加載
文章來源地址http://www.zghlxwxcb.cn/news/detail-568264.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title></head><style>
/*IE6下不支持 png 添加DD_belatedPNG_0.0.8a.js 引用 DD_belatedPNG.fix方法 實(shí)現(xiàn)透明度加載*/
body{background: #000;}
.box{width:400px;height:400px;background: url(img/png.png);}</style><script src="DD_belatedPNG_0.0.8a.js"></script><script>
DD_belatedPNG.fix('.box'); </script><body>
<div class="box"></div></body></html>到了這里，關(guān)于HTML基礎(chǔ)知識(shí)—兼容問題與解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
