【IE6的瘋狂之三】IE6 3像素BUG的實例
日期:2013-12-16 來源:攀枝花惠康網絡公司
問題:2列結構。左列固定,右列液態
我需要做一個結構。
2列,左邊列固定寬度。右邊列使用殘剩寬度。整體寬度不固定,這樣不管在17 仍是19的屏幕上,左邊列始終寬度不變,右邊列寬度始終占有殘剩寬度。
可是我寫這個結構缺在ie6下面始終解決不了3像素bug。
請在IE6下測試
<!– saved from url=(0027)<a href=http://www.css88.com/archives/”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a> –>
<HTML xmlns=”<a href=http://www.css88.com/archives/”http://www.w3.org/1999/xhtml” target=”_blank” rel=”external”>http://www.w3.org/1999/xhtml</a>”><HEAD><TITLE>關于3像素bug的延生</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE type=text/css>BODY {
FONT-SIZE: 12px
<BODY>
}
.a1 {
.a2 {
BACKGROUND: #333; FLOAT: left; WIDTH: 100px; COLOR: #ffffff; HEIGHT: 240px
}
}
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
style=”COLOR: #ffff00″ onClick=”this.parentNode.style.height=’150px’”
.a2 #jing {
<DIV
.a2 #jing2 {
<META content=”MSHTML 6.00.6000.16587″ name=GENERATOR></HEAD>
BACKGROUND: #ff9900; HEIGHT: 100px
BACKGROUND: #00ccff; MARGIN-LEFT: -3px; HEIGHT: 100px
}
<DIV class=a1>我是class=a1 <BR><A style=”COLOR: #ffff00″
onclick=”this.parentNode.style.height=’100px’”
href=http://www.css88.com/archives/”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>點擊設置a1的高度為100</A><BR><A
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=http://www.css88.com/archives/”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”>http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>”>
href=http://www.css88.com/archives/”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>點擊設置a1的高度為150</A></DIV>
<DIV class=a2>
id=jing>我是id=jing<BR>這個問題存在于IE6瑯縵沔。ie7,opera,ff都沒問題。不雅察看class=a2的div所設置的邊框會發現,a2和a1之間是沒有距離的??墒莂2
</STYLE>
瑯縵沔元素(文本)會和a2之間發生近似padding-left:3px;的效不美觀。操作以往的設置負值,也沒法子消弭第一個元素id=jing和a2的距離。更有意思的是當我設置了_margin-left:-3px;原本id=jing和a2
之間的3像素距離釀成了2像素??墒菍崟r我_margin-left 的負值設置得再年夜,不能完全消弭</DIV>
<DIV id=jing2>我是id=jing2<BR>當a1的高度年夜于id=jing這個元素的高度的時辰,di=jing2
就不會和a2之間有間距。<BR>原本我只是想做一個左列固定,右列自動順應殘剩寬度的結構。可是沒想到發現了這個問題。求某位高手告訴我怎么解決。
也會發生和a2之間近似padding-left:3px的間距。 當a1 小于或者等于id=jing的時辰,id=jing2
</DIV></DIV></BODY></HTML>
文章來源:攀枝花惠康網絡公司
惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。