CSS Hack
什么是CSS Hack?
針對(duì)IE的不同版本設(shè)置不同的CSS屬性, 我們就稱之為CSS HackCSS Hack可以讓我們編寫的CSS代碼, 只在我們指定的IE版本瀏覽器下有效
\9作用, 就是讓該屬性在IE10及以下的瀏覽器都有效
*作用, 就是讓該屬性在IE7及以下的瀏覽器都有效
_作用, 就是讓該屬性在IE6及以下的瀏覽器都有效
注意點(diǎn):
在使用CSS Hack的時(shí)候, 一定要將CSS Hack的代碼寫到標(biāo)準(zhǔn)代碼的后面
<style>
div{
width: 200px;
height: 200px;
background-color: red;
background: green\9;
*background-color: yellow;
_background-color: blue;
}
</style>
IE6盒模型的默認(rèn)高度
- 在IE6瀏覽器下， 盒模型的最小高度是19px昼浦， 所以如果設(shè)置了盒模型的高度為1px岩瘦， 也會(huì)顯示位19個(gè)px
注意點(diǎn)： 在其它瀏覽器都沒有問題 -
解決方案
如果現(xiàn)在IE6瀏覽器下設(shè)置盒模型的高度為1px竟坛， 那么需要再添加一個(gè)屬性
overflow: hidden;
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 1px;
background: red;
/*添加這個(gè)屬性就能解決IE6盒子默認(rèn)高度問題*/
overflow: hidden;
}
</style>
IE6盒子默認(rèn)高度時(shí)19px
父子元素包裹寬高問題
- 在其它瀏覽器中亿笤， 如果子元素的寬高大于父元素的寬高赌朋， 那么不會(huì)把父元素?fù)伍_
- 在IE6瀏覽器下嫁乘， 如果子元素的寬高大于父元素的寬高杯瞻，那么父元素會(huì)被子元素?fù)伍_
- 解決方案：
在企業(yè)開發(fā)中， 不要讓子元素的寬高大于父元素的寬高
如果在企業(yè)開發(fā)中子元素必須要大于父元素端圈， 那么可以添加overflow: hidden;
overflow: hidden;含義： 將超出父元素的部分剪切掉
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 100px;
height: 100px;
border: 10px solid #000;
/*overflow: hidden;*/
}
.son{
width: 200px;
height: 200px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
![]()
父盒子會(huì)被子盒子撐開
父盒子會(huì)被子盒子撐開
IE6浮動(dòng)兼容問題
浮動(dòng)的兼容問題一
在IE6中, 如果浮動(dòng)的父元素的高度是由子元素?fù)纹饋淼? 那么在IE6中父元素的浮動(dòng)就會(huì)失效
解決方案:
讓子元素也浮動(dòng)
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
border: 1px solid #000;
}
div p{
float: left;
height: 300px;
background: red;
}
div p:nth-child(2){
background: deepskyblue;
}
</style>
<div class="one">
<p>我是段落</p>
</div>
<div class="two">
<p>我是段落</p>
</div>
浮動(dòng)的兼容問題二
-
如果兩個(gè)元素一個(gè)浮動(dòng)了, 另外一個(gè)沒有浮動(dòng), 然后設(shè)置另外一個(gè)元素的margin-left等于浮動(dòng)元素的寬度, 在IE6瀏覽器下兩個(gè)元素之間會(huì)多出1px的間隙,在企業(yè)開發(fā)中不要這樣寫
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
}
.one{
float: left;
}
.two{
margin-left: 200px;
float: left;
background: purple;
}
</style>
浮動(dòng)兼容問題三
1.在IE6中如果一個(gè)元素浮動(dòng)了, 然后又設(shè)置了這個(gè)元素浮動(dòng)那邊的margin, 那么會(huì)出現(xiàn)
雙倍margin問題-
解決方案
- 在企業(yè)開發(fā)中, 如果一個(gè)元素左浮動(dòng)了, 那么就不要設(shè)置這個(gè)元素左邊的margin, 如果一個(gè)元素右浮動(dòng)了, 那么就不要設(shè)置這個(gè)元素右邊的margin
- 通過CSS HACK設(shè)置
*display: inline;
雙倍margin問題
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 200px;
height: 200px;
background: red;
margin-left: 200px;
*display: inline;
}
</style>
浮動(dòng)兼容問題四
- 如果在IE7及以下的瀏覽器中, li中的元素都浮動(dòng), 在IE下會(huì)產(chǎn)生4px間隙問題
- 解決方案:
通過給li標(biāo)簽設(shè)置*vertical-align: top;來解決問題
間隙問題
<style>
*{
margin: 0;
padding: 0;
}
ul>li{
height: 100px;
width: 500px;
border: 2px solid #000;
background: deepskyblue;
*vertical-align: top;
}
ul>li>.left{
float: left;
background: green;
}
ul>li>.right{
float: right;
background: purple;
}
</style>
<ul>
<li>
<div class="left">左邊</div>
<div class="right">右邊</div>
</li>
<li>
<div class="left">左邊</div>
<div class="right">右邊</div>
</li>
<li>
<div class="left">左邊</div>
<div class="right">右邊</div>
</li>
<li>
<div class="left">左邊</div>
<div class="right">右邊</div>
</li>
</ul>
浮動(dòng)兼容問題五
在IE6瀏覽器中,浮動(dòng)元素之間有行內(nèi)元素或者注釋, 在IE下出現(xiàn)小尾巴問題
解決方案:
2.1 讓浮動(dòng)元素的寬度不要等于父元素的寬度, 并且要小于3px及以上
2.2 不要在浮動(dòng)元素之間添加任何內(nèi)容
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 300px;
height: 300px;
background: red;
}
.father .left{
width: 150px;
height: 100%;
float: left;
}
.father .right{
float: right;
width: 150px;
height: 100%;
background: skyblue;
}
</style>
<div class="father">
<div class="left"></div>
<!---->
<div class="right">我是一段文字</div>
</div>
在高版本瀏覽器中顯示
在IE6中顯示小尾巴
IE6瀏覽器透明背景圖片兼容問題
- 1.無論通過img標(biāo)簽設(shè)置, 還是通過background設(shè)置, 透明的圖片, 在IE6瀏覽器下都不透明
解決方案:
2.1利用第三方的JS框架來解決
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("div");
</script>
注意點(diǎn): fix當(dāng)中, 要解決誰的透明問題, 就填寫誰
<script src="image/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("div");
</script>
<style>
div{
width: 200px;
height: 300px;
background: url("image/lnj123.png") no-repeat;
}
</style>
在IE6瀏覽器中背景不透明
解決后顯示透明
- 由于第三方的js框架無法解決body的背景在IE6下不透明的問題, 所以可以使用如下方式來解決
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/lnj123.png", sizingMethod="crop");
注意點(diǎn):
1.一定要給body設(shè)置寬度和高度, 在企業(yè)開發(fā)中, 一般我們都會(huì)給body設(shè)置寬度和高度為100%
2.src=""要修改為我們需要設(shè)置的圖片地址
-->
<style>
body{
width: 100%;
height: 100%;
background: red url("image/lnj123.png") no-repeat;
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/lnj123.png", sizingMethod="crop");
}
</style>
input的兼容問題
- 在IE6中, 如果input的寬高和父元素的寬高一樣, 那么會(huì)在頂部和底部多出一段間隙
解決方案:
給Input添加浮動(dòng)屬性
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 40px;
background: red;
}
input{
width: 300px;
height: 40px;
float: left;
}
</style>
<div>
<input type="text" placeholder="請(qǐng)輸入一點(diǎn)內(nèi)容">
</div>
IE6中顯示間隙
- 在IE6瀏覽器下, 如果給input設(shè)置背景, 那么背景會(huì)隨著input中的內(nèi)容被填滿而移出input
- 解決方案:
給background設(shè)置背景關(guān)聯(lián)的fixed屬性即可
<style>
*{
margin: 0;
padding: 0;
}
input{
background: url("image/icon.png") no-repeat fixed;
}
</style>
IE6input標(biāo)簽背景移動(dòng)
