瀏覽器兼容之旅第四站:IE常見Bug總結(jié)及修復(fù)方法—part2
發(fā)布時(shí)間：2012-12-27 12:50:08 作者：佚名 
我要評(píng)論
我要評(píng)論IE瀏覽器下十種經(jīng)典的Bug產(chǎn)生的原因，以及如何在寫代碼中避免這些Bug的產(chǎn)生，或者說Bug發(fā)生后，又如何來解決這些Bug;這節(jié)我們接著來看IE下的相關(guān)Bug。盡量了解并掌握他們，只有知已知彼才能百戰(zhàn)百勝
《瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1》中介紹了IE瀏覽器下十種經(jīng)典的Bug產(chǎn)生的原因，以及如何在寫代碼中避免這些Bug的產(chǎn)生，或者說Bug發(fā)生后，又如何來解決這些Bug。這節(jié)我們接著來看IE下的相關(guān)Bug。盡量了解并掌握他們，只有知已知彼才能百戰(zhàn)百勝。因?yàn)榇蠹叶紘L過IE下的苦楚，有時(shí)為了一個(gè)Bug糾結(jié)一兩天，或者更長(zhǎng)的都有，以致于都想頭撞南墻，不想活了，這都是IE給逼的呀。不過隨著時(shí)間往后的推移，我也不覺得他有什么恐怖的，我認(rèn)為寫代碼時(shí)，結(jié)構(gòu)上多加注意，寫樣式時(shí)盡量避免。這樣一來，也沒有多少Bug會(huì)纏著你。別的不說了，我們繼續(xù)下面的內(nèi)容——IE的Bug處理。
一、IE6克隆文本的Bug
這個(gè)Bug在IE6下碰到代碼的注釋常發(fā)生，時(shí)常用朋友問到，怎么我的沒有輸入這個(gè)東西，怎么會(huì)生成呢？我們來看下面的一張圖，展示的就是月IE6下無故多了一些文本：
在我們的Html代碼為：
<!-- IE6 does not like comments -- >
<div class="floating_div" >
<... some markup ... >
</div>
<!-- IE6 does not like comments really -- >
往往你的結(jié)構(gòu)如上面的風(fēng)格時(shí)，就會(huì)碰到IE6下多了一段文本，不過這樣的Bug不會(huì)說，結(jié)構(gòu)類似上面就會(huì)產(chǎn)生，這也要看你的運(yùn)氣了，你運(yùn)氣不好，你一直沒機(jī)會(huì)看到這樣的Bug,你要是運(yùn)氣好，常能看到。是不是對(duì)IE6更加無語了。那么針對(duì)這樣的Bug要如何處理呢？也很簡(jiǎn)單
方法一：
方法一是使用條件注釋，這樣可以輕松的避開這個(gè)Bug。有關(guān)于條件注釋的使用，大家可以點(diǎn)擊《瀏覽器兼容之旅的第一站:如何創(chuàng)建條件樣式》查閱。我們來看代碼：
<!--[if IE] >IE6 does not like comments <![endif]-->
<div class="floating_div" >
<... some markup ... >
</div>
<!--[if IE] >IE6 does not like comments <![endif]-->
方法二：在注釋前面的那個(gè)浮動(dòng)元素加上“display:inline”
方法三：最安全的解決方法，也是最簡(jiǎn)單的方法，把注釋全部去掉。這樣就永遠(yuǎn)不會(huì)有這個(gè)Bug發(fā)生。
個(gè)人更趨向于方法一和方法三，當(dāng)然大家要是想了解更多有關(guān)天這個(gè)Bug話，還可以點(diǎn)擊 Adam Hicks 寫的《IE6 Ghost Text Bug 》一文。
二、ＩＥ下圖片縮放Bug
這個(gè)你一定會(huì)喜歡，就是圖片在IE下縮放時(shí)會(huì)影響其質(zhì)量，你可以讓他和別的瀏覽器對(duì)比一下，IE下看起圖片質(zhì)量極差：
解決辦法：
img { -ms-interpolation-mode: bicubic; }
三、IE6下PNG圖片透明Bug
大家都知道，有時(shí)需要使用透明圖片，別然gif和png8都可以制作透明圖片，但這兩者對(duì)于要求強(qiáng)美感的你來說一定達(dá)不到你的要求，因?yàn)闀?huì)有雜邊，那么使用png24或png32圖片，質(zhì)量是沒有問題了，可引發(fā)另一個(gè)頭痛的問題，就是IE6下面顯示圖片會(huì)有一層淡蘭色的背景，
這樣一來我們需要起辦法來解決掉這層淡蘭色的背景色，方法很多，常用的有兩種：
方法一：濾鏡的方法
.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
或者：
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
或
<img src="test.png" _fcksavedurl=""test.png"" _fcksavedurl=""test.png"" _fcksavedurl=""test.png"" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png', sizingMethod='scale');" alt="" / >
方法二：DD_belatedPNG.js
可以使用DD_belatedPNG來產(chǎn)現(xiàn)，具體實(shí)如何實(shí)現(xiàn)，大家可以參考前面我所整理的《Drupal7中解決IE6的png透明問題》一文?；蛘咴冢牵呛投饶镏兄苯铀阉麝P(guān)鍵字fix PNG Transparency for ie6 將會(huì)有一大堆關(guān)于解決IE6下的PNG透明問題。
四、<IFrame>透明背景Bug
這個(gè)Bug是有關(guān)于<iframe>有背景透明問題——在Firefox和Safari中，你應(yīng)該不會(huì)遇到這個(gè)問題，因?yàn)槟J(rèn)情況下，iframe的背景設(shè)置為透明，但在IE瀏覽器，它不會(huì)。你需要在iframe中設(shè)置［allowTransparency="true"］，并在調(diào)入的頁面中設(shè)置其body的“background-color”為“transparent”:
HTML Markup
<iframe src="content.html" allowTransparency="true" ></iframe>
而且需要在iframe中調(diào)入的content.html中設(shè)置其body的背景色：
body {background-color: transparent;}
五、禁用IE瀏覽器默認(rèn)的垂直滾動(dòng)條
默認(rèn)情況下，IE顯示垂直滾動(dòng)條，即使內(nèi)容很好地適合窗口。你可以使用overflow:auto來改變，設(shè)置他需要時(shí)顯示出來
html {
overflow: auto;
}
六、IE6下:hover偽類Bug
在IE6下只支持a:hover的效果，對(duì)于其他元素的:hover狀態(tài)都不支持的。對(duì)于這個(gè)bug最好的解決辦法就是使用jQuery或js來解決，下面我們一起看一個(gè)jQuery的解決方案
HTML Markup
<ul id="list" >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
Css Code
.hover {
background: #f00;
}
jQuery Code
$('#list li').hover(function () {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
上面的方法是通過jQuery中的.hover()以及.addClass()和.removeClass()幾種方法共同實(shí)現(xiàn)。有關(guān)于.addClass()和.removeClass()也可以參閱《jQuery中.addClass()和.removeClass()》一文的相關(guān)介紹。
七、修復(fù)min-width/max-width和max-heigt/min-height的Bug
上一節(jié)《瀏覽器兼容之旅的第三站:IE常見Bug——part1》中，我們就得知：在IE6下，他是不識(shí)別min-height屬性的，其實(shí)他不單單不識(shí)別min-height屬性，而且他還不演識(shí)別max-height,min-width,max-width等屬性。這是對(duì)于前端攻城師來說又是一個(gè)非常棘手的問題，因?yàn)樵S多布局方案中都時(shí)常會(huì)用到這些屬性，才能更好的工作。在現(xiàn)代瀏覽器中，你可以輕松的像下面那樣輕松的使用這些屬性就能正常工作：
div.max-height {
max-height: 300px;
}
div.min-height {
min-height: 300px;
}
div.max-width {
max-width: 300px;
}
div.min-width {
min-width: 300px;
}
上面這些在IE6下是不識(shí)別的，換句話說是無法正常工作的，因?yàn)樗麄兺耆幻靼走@些基本的CSS屬性。不過幸運(yùn)的是，IE瀏覽器有一套其自己的專有屬性，就是使用javaScript表達(dá)式來操縱(X)HTML的文檔屬性，比如說我們這里所說的min-width,max-width和min-height，max-height等屬性。不過使用IE的專有屬性有兩個(gè)缺點(diǎn)：
表達(dá)式是基于javaScrpt腳本上運(yùn)行，如果用戶的瀏覽器不支持javaScript或禁用了javaScript時(shí)，那么在用戶瀏覽器上將無法正常運(yùn)行；
另外使用IE的專有屬性表達(dá)式是非常耗費(fèi)資源，同時(shí)也可能產(chǎn)生負(fù)面影響。
雖然使用IE專有屬性那不良之處，但有時(shí)為了滿足用戶的完美追求，也只好犧牲一些性能上的條件，來完整的讓這幾個(gè)屬性在IE6上正常運(yùn)行。
1、max-width
/* max-width for IE6 */
* html div.max-width {
width: expression(document.body.clientWidth > 299 ? "300px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width {
max-width: 300px;
}
2、min-width
/* min-width for IE6 */
* html div.min-width {
width: expression(document.body.clientWidth < 301 ? "300px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
min-width: 300px;
}
3、max-height
/* max-height for IE6 */
* html div.max-height {
height: expression(this.scrollHeight > 299 ? "300px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
max-height: 300px;
}
4、min-height
/* min-height for IE6 */
div.min-height {
min-height: 500px;
height: auto !important;
height: 500px;
}
八、修復(fù)position:relative的Bug
這個(gè)Bug并不常見，因?yàn)槲覀冇欣镌谠刂惺褂胮osition:relative達(dá)到某種效果。在現(xiàn)代瀏覽器使用position:relative屬性定位嵌套元素不會(huì)有任何問題，但在IE6下并不是那么的友好，常給會(huì)我們的布局帶來一些意想不到的錯(cuò)誤。不過解決這樣的問題很輕松，我們只需要給使用了相對(duì)定位的元素用zoom:1屬性觸發(fā)IE6下的hasLayout就可以解決。
selector {
position: relative;
}
* html .selector {
zoom: 1;
}
注：使用zoom:1時(shí)不應(yīng)該應(yīng)用在行內(nèi)元素(inline)上，不然在IE6下將觸發(fā)元素為塊元素。
九、修復(fù)margin的負(fù)值
負(fù)邊距在我們平時(shí)的Web制作中，為了達(dá)到一定的效果也時(shí)常用到，而在現(xiàn)代瀏覽器中使用負(fù)的邊距并不會(huì)有任何問題，但是在IE6下對(duì)負(fù)的margin值并不友好，除非你在目標(biāo)元素上使用“position:relative”屬性：
.selector {
margin: -1.5em;
}
* html .selector {
position: relative;
zoom: 1;
}
十、修復(fù)overflow的問題
overflow是一個(gè)好東西呀，有時(shí)他可以幫我們把溢出的內(nèi)容不在顯示，有時(shí)也可以幫我們清除浮動(dòng)（《Clear Float 》），用時(shí)還真離不開這個(gè)overflow?？墒窃贗E6上使用overflow屬性會(huì)給我們帶來意想不到的、無法解釋的顯示問題。幸運(yùn)的是我們配合hasLayout可以解決一下溢出問題，如下面的例子：
.selector {
overflow: hidden
}
* html .selector {
zoom: 1;
}
但當(dāng)font-style:italic時(shí)，將有一個(gè)新的問題會(huì)發(fā)生——會(huì)擴(kuò)大它的父元素的寬度。要解決這個(gè)細(xì)微的差別，只需要在元素的父元素加上一個(gè)：
* html .selector {
overflow-x: hidden;
}
這里我們又一起見證了IE下的另外十個(gè)Bug以及其避免和解決的方法，雖然沒有《瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1》中介紹的那十個(gè)Bug經(jīng)典，但也是IE的Bug。沒有碰到或許你認(rèn)為不是問題，但當(dāng)你碰到了，又有時(shí)會(huì)抓破了頭皮了都不知是何故，所以還是那句話，以備急需。那么到現(xiàn)在，我們總共見證了IE下的二十種不同的Bug，以及其處理方法，其中有很多大家見識(shí)了，也處理過了，但我相信其中有很多肯定是沒有遇到過，對(duì)于沒有遇到過的，就了解一下吧，說不定哪一天你就碰到了。哈。。。。：）。
一、IE6克隆文本的Bug
這個(gè)Bug在IE6下碰到代碼的注釋常發(fā)生，時(shí)常用朋友問到，怎么我的沒有輸入這個(gè)東西，怎么會(huì)生成呢？我們來看下面的一張圖，展示的就是月IE6下無故多了一些文本：
在我們的Html代碼為：
復(fù)制代碼
代碼如下:<!-- IE6 does not like comments -- >
<div class="floating_div" >
<... some markup ... >
</div>
<!-- IE6 does not like comments really -- >
往往你的結(jié)構(gòu)如上面的風(fēng)格時(shí)，就會(huì)碰到IE6下多了一段文本，不過這樣的Bug不會(huì)說，結(jié)構(gòu)類似上面就會(huì)產(chǎn)生，這也要看你的運(yùn)氣了，你運(yùn)氣不好，你一直沒機(jī)會(huì)看到這樣的Bug,你要是運(yùn)氣好，常能看到。是不是對(duì)IE6更加無語了。那么針對(duì)這樣的Bug要如何處理呢？也很簡(jiǎn)單
方法一：
方法一是使用條件注釋，這樣可以輕松的避開這個(gè)Bug。有關(guān)于條件注釋的使用，大家可以點(diǎn)擊《瀏覽器兼容之旅的第一站:如何創(chuàng)建條件樣式》查閱。我們來看代碼：
復(fù)制代碼
代碼如下:<!--[if IE] >IE6 does not like comments <![endif]-->
<div class="floating_div" >
<... some markup ... >
</div>
<!--[if IE] >IE6 does not like comments <![endif]-->
方法二：在注釋前面的那個(gè)浮動(dòng)元素加上“display:inline”
方法三：最安全的解決方法，也是最簡(jiǎn)單的方法，把注釋全部去掉。這樣就永遠(yuǎn)不會(huì)有這個(gè)Bug發(fā)生。
個(gè)人更趨向于方法一和方法三，當(dāng)然大家要是想了解更多有關(guān)天這個(gè)Bug話，還可以點(diǎn)擊 Adam Hicks 寫的《IE6 Ghost Text Bug 》一文。
二、ＩＥ下圖片縮放Bug
這個(gè)你一定會(huì)喜歡，就是圖片在IE下縮放時(shí)會(huì)影響其質(zhì)量，你可以讓他和別的瀏覽器對(duì)比一下，IE下看起圖片質(zhì)量極差：
解決辦法：
復(fù)制代碼
代碼如下:img { -ms-interpolation-mode: bicubic; }
三、IE6下PNG圖片透明Bug
大家都知道，有時(shí)需要使用透明圖片，別然gif和png8都可以制作透明圖片，但這兩者對(duì)于要求強(qiáng)美感的你來說一定達(dá)不到你的要求，因?yàn)闀?huì)有雜邊，那么使用png24或png32圖片，質(zhì)量是沒有問題了，可引發(fā)另一個(gè)頭痛的問題，就是IE6下面顯示圖片會(huì)有一層淡蘭色的背景，
這樣一來我們需要起辦法來解決掉這層淡蘭色的背景色，方法很多，常用的有兩種：
方法一：濾鏡的方法
復(fù)制代碼
代碼如下:.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
或者：
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
或
<img src="test.png" _fcksavedurl=""test.png"" _fcksavedurl=""test.png"" _fcksavedurl=""test.png"" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png', sizingMethod='scale');" alt="" / >
方法二：DD_belatedPNG.js
可以使用DD_belatedPNG來產(chǎn)現(xiàn)，具體實(shí)如何實(shí)現(xiàn)，大家可以參考前面我所整理的《Drupal7中解決IE6的png透明問題》一文?；蛘咴冢牵呛投饶镏兄苯铀阉麝P(guān)鍵字fix PNG Transparency for ie6 將會(huì)有一大堆關(guān)于解決IE6下的PNG透明問題。
四、<IFrame>透明背景Bug
這個(gè)Bug是有關(guān)于<iframe>有背景透明問題——在Firefox和Safari中，你應(yīng)該不會(huì)遇到這個(gè)問題，因?yàn)槟J(rèn)情況下，iframe的背景設(shè)置為透明，但在IE瀏覽器，它不會(huì)。你需要在iframe中設(shè)置［allowTransparency="true"］，并在調(diào)入的頁面中設(shè)置其body的“background-color”為“transparent”:
HTML Markup
復(fù)制代碼
代碼如下:<iframe src="content.html" allowTransparency="true" ></iframe>
而且需要在iframe中調(diào)入的content.html中設(shè)置其body的背景色：
復(fù)制代碼
代碼如下:body {background-color: transparent;}
五、禁用IE瀏覽器默認(rèn)的垂直滾動(dòng)條
默認(rèn)情況下，IE顯示垂直滾動(dòng)條，即使內(nèi)容很好地適合窗口。你可以使用overflow:auto來改變，設(shè)置他需要時(shí)顯示出來
復(fù)制代碼
代碼如下:html {
overflow: auto;
}
六、IE6下:hover偽類Bug
在IE6下只支持a:hover的效果，對(duì)于其他元素的:hover狀態(tài)都不支持的。對(duì)于這個(gè)bug最好的解決辦法就是使用jQuery或js來解決，下面我們一起看一個(gè)jQuery的解決方案
HTML Markup
復(fù)制代碼
代碼如下:<ul id="list" >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
Css Code
復(fù)制代碼
代碼如下:.hover {
background: #f00;
}
jQuery Code
復(fù)制代碼
代碼如下:$('#list li').hover(function () {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
上面的方法是通過jQuery中的.hover()以及.addClass()和.removeClass()幾種方法共同實(shí)現(xiàn)。有關(guān)于.addClass()和.removeClass()也可以參閱《jQuery中.addClass()和.removeClass()》一文的相關(guān)介紹。
七、修復(fù)min-width/max-width和max-heigt/min-height的Bug
上一節(jié)《瀏覽器兼容之旅的第三站:IE常見Bug——part1》中，我們就得知：在IE6下，他是不識(shí)別min-height屬性的，其實(shí)他不單單不識(shí)別min-height屬性，而且他還不演識(shí)別max-height,min-width,max-width等屬性。這是對(duì)于前端攻城師來說又是一個(gè)非常棘手的問題，因?yàn)樵S多布局方案中都時(shí)常會(huì)用到這些屬性，才能更好的工作。在現(xiàn)代瀏覽器中，你可以輕松的像下面那樣輕松的使用這些屬性就能正常工作：
復(fù)制代碼
代碼如下:div.max-height {
max-height: 300px;
}
div.min-height {
min-height: 300px;
}
div.max-width {
max-width: 300px;
}
div.min-width {
min-width: 300px;
}
上面這些在IE6下是不識(shí)別的，換句話說是無法正常工作的，因?yàn)樗麄兺耆幻靼走@些基本的CSS屬性。不過幸運(yùn)的是，IE瀏覽器有一套其自己的專有屬性，就是使用javaScript表達(dá)式來操縱(X)HTML的文檔屬性，比如說我們這里所說的min-width,max-width和min-height，max-height等屬性。不過使用IE的專有屬性有兩個(gè)缺點(diǎn)：
表達(dá)式是基于javaScrpt腳本上運(yùn)行，如果用戶的瀏覽器不支持javaScript或禁用了javaScript時(shí)，那么在用戶瀏覽器上將無法正常運(yùn)行；
另外使用IE的專有屬性表達(dá)式是非常耗費(fèi)資源，同時(shí)也可能產(chǎn)生負(fù)面影響。
雖然使用IE專有屬性那不良之處，但有時(shí)為了滿足用戶的完美追求，也只好犧牲一些性能上的條件，來完整的讓這幾個(gè)屬性在IE6上正常運(yùn)行。
1、max-width
復(fù)制代碼
代碼如下:/* max-width for IE6 */
* html div.max-width {
width: expression(document.body.clientWidth > 299 ? "300px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width {
max-width: 300px;
}
2、min-width
復(fù)制代碼
代碼如下:/* min-width for IE6 */
* html div.min-width {
width: expression(document.body.clientWidth < 301 ? "300px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
min-width: 300px;
}
3、max-height
復(fù)制代碼
代碼如下:/* max-height for IE6 */
* html div.max-height {
height: expression(this.scrollHeight > 299 ? "300px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
max-height: 300px;
}
4、min-height
復(fù)制代碼
代碼如下:/* min-height for IE6 */
div.min-height {
min-height: 500px;
height: auto !important;
height: 500px;
}
八、修復(fù)position:relative的Bug
這個(gè)Bug并不常見，因?yàn)槲覀冇欣镌谠刂惺褂胮osition:relative達(dá)到某種效果。在現(xiàn)代瀏覽器使用position:relative屬性定位嵌套元素不會(huì)有任何問題，但在IE6下并不是那么的友好，常給會(huì)我們的布局帶來一些意想不到的錯(cuò)誤。不過解決這樣的問題很輕松，我們只需要給使用了相對(duì)定位的元素用zoom:1屬性觸發(fā)IE6下的hasLayout就可以解決。
復(fù)制代碼
代碼如下:selector {
position: relative;
}
* html .selector {
zoom: 1;
}
注：使用zoom:1時(shí)不應(yīng)該應(yīng)用在行內(nèi)元素(inline)上，不然在IE6下將觸發(fā)元素為塊元素。
九、修復(fù)margin的負(fù)值
負(fù)邊距在我們平時(shí)的Web制作中，為了達(dá)到一定的效果也時(shí)常用到，而在現(xiàn)代瀏覽器中使用負(fù)的邊距并不會(huì)有任何問題，但是在IE6下對(duì)負(fù)的margin值并不友好，除非你在目標(biāo)元素上使用“position:relative”屬性：
復(fù)制代碼
代碼如下:.selector {
margin: -1.5em;
}
* html .selector {
position: relative;
zoom: 1;
}
十、修復(fù)overflow的問題
overflow是一個(gè)好東西呀，有時(shí)他可以幫我們把溢出的內(nèi)容不在顯示，有時(shí)也可以幫我們清除浮動(dòng)（《Clear Float 》），用時(shí)還真離不開這個(gè)overflow?？墒窃贗E6上使用overflow屬性會(huì)給我們帶來意想不到的、無法解釋的顯示問題。幸運(yùn)的是我們配合hasLayout可以解決一下溢出問題，如下面的例子：
復(fù)制代碼
代碼如下:.selector {
overflow: hidden
}
* html .selector {
zoom: 1;
}
但當(dāng)font-style:italic時(shí)，將有一個(gè)新的問題會(huì)發(fā)生——會(huì)擴(kuò)大它的父元素的寬度。要解決這個(gè)細(xì)微的差別，只需要在元素的父元素加上一個(gè)：
復(fù)制代碼
代碼如下:* html .selector {
overflow-x: hidden;
}
這里我們又一起見證了IE下的另外十個(gè)Bug以及其避免和解決的方法，雖然沒有《瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1》中介紹的那十個(gè)Bug經(jīng)典，但也是IE的Bug。沒有碰到或許你認(rèn)為不是問題，但當(dāng)你碰到了，又有時(shí)會(huì)抓破了頭皮了都不知是何故，所以還是那句話，以備急需。那么到現(xiàn)在，我們總共見證了IE下的二十種不同的Bug，以及其處理方法，其中有很多大家見識(shí)了，也處理過了，但我相信其中有很多肯定是沒有遇到過，對(duì)于沒有遇到過的，就了解一下吧，說不定哪一天你就碰到了。哈。。。。：）。
相關(guān)文章
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對(duì)hack IE11\IE9\IE8無效
每次設(shè)計(jì)一張網(wǎng)頁或一個(gè)表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計(jì)時(shí)，我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語法進(jìn)行hack，從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-02-12- 這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問題，詳細(xì)的介紹了幾種我遇到的問題和解決方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-14
對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-20
