CSS教程之破洛洛收拾10个罕见的IE bug息争决办法

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
破洛洛文章简介：IE扫瞄器罕见的10个BUG及办理办法.
我枚举了10个罕见的IEbug息争决办法。我信任这将可以匡助你削减调试IE结构纷歧致时花失落的工夫。在处置IE方面每一个人都有他们本人的故事。作为一个开辟者我不能不面临大批的IE的阴阳怪气的成绩而且有的时分你只是想用头撞墙。可是跟着工夫的推移，我们渐渐吃一堑长一智（有些时分那不是我们的错，是IE的错！）而且入手下手承受和了解IE的奇异举动。我们不能不如许由于仍旧无数量可不雅的IE6用户。最好的做法是一入手下手就不休的从分歧的扫瞄器测试你的网站。从一入手下手就办理结构成绩要比在数千行html和CSS代码以后简单的多。
有良多活动在抗议IE6，撑持它的是年夜多半web专家和看起来不怎样体贴的一般用户。以是，我们如今能做甚么？我们不能不持续发掘来办理IE6的成绩。可是，等一下，有一个奋发民气的动静。基于w3cschool的月度报表，IE6的用户这些年已削减了一些。从2006年6月的60.3%到如今2009年9月的13.6%。依照这类比例，我们应当能在2010年岁尾的时分保持IE6(译注：外洋的情形还真是一片年夜好啊~。~)
好了，回到实际，我已列出了全体我之前碰到的成绩作为将来参考的列表。我信任这将可以匡助你削减调试IE结构纷歧致时花失落的工夫。
1、IE6鬼魂文本(GhostTextbug)
在我写本文之前，我碰到了这个bug。它相称的乖僻和幽默。一块不知哪来的反复的文本，被IE6显现在接近原文本的上面。(译注：也能够参看Explorer6DuplicateCharactersBug取得bug演示)。我没法办理它，以是我搜刮它，公然，这是另外一个IE6的bug。
对此有很多办理办法，可是没有一个对我的例子无效(由于网站的庞大性我没法利用个中的一些办法)。以是我利用了hack。在原文本以后增添空格看起来能办理这个成绩。
可是，从HippyTechBlog那边懂得到，成绩面前的缘故原由是因为html正文标签。IE6不克不及准确的衬着它。上面是他倡议的办理计划列表：
办理办法：

• 利用<!―[IF!IE]>标签包抄正文
  
• 移除正文
  
• 在前浮动上增添款式{display:inline;}
  
• 在得当的浮动的div上利用负边距
  
• 在原文本增添分外的(好比10个空格)(hackyway)
  

2、绝对地位和溢出埋没(PositionRelativeandOverflowHidden)
这个成绩我碰到过良多次，事先我正在筹办一个JQuery的教程，由于我利用了良多overflowhidden来到达我想要的结构。
成绩产生在当父元素的overflow被设置成hidden而且子元素被设置成position:relative。
CSS-Trick有一个很好的例子来演示这个bug。position:relativeandoverflowininternetexplorer
办理办法：
为父元素增添position:relative;
3、IE的最小高度(Min-HeightforIE)
这很复杂，IE疏忽min-height属性。你能够用上面的hack来修复它。感激DustinDiaz。
这个办理办法在IE6,Mozilla/Firefox/Gecko,Opera7.x+,Safari1.2里都事情的很好。
办理办法：

selector{
min-height:500px;
height:auto!important;
height:500px;
}
4、Bicubic图象缩放(BicubicImageScaling)
你会喜好这个的。IE那糟图象缩放让你很困扰？假如你拿IE和其他扫瞄器对照，IE减少的图象看起来不如其他扫瞄器。

登录/注册后可看大图

办理办法：

img{-ms-interpolation-mode:bicubic;}

5、PNG通明(PNGTransparency)
我猜每一个人都晓得这个，但我仍把它列在这里，作为今后的参考。
以是假如你想要利用通明图象而且GIF不克不及给你想要的质量，你会必要这个对PNG的hack。你必需意想到，假如你利用一张PNG图象作为背景，你将不克不及设置背景的地位。
办理办法：

img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
6、IFrame通明背景(IFrameTransparentBackground)
在firefox和safari里你应当不会碰到这个成绩由于默许情形下，iframe的背景被设置为transparent，可是在IE里，却不是云云。你必要用到allowTransparency属性而且到场上面的CSS代码来告竣目标。
办理办法：

/*intheiframeelement*/
<iframesrc="content.html"allowTransparency="true">
</iframe>
/*intheiframedocuement,inthiscasecontent.html*/
body{
background-color:transparent;
}

7、禁用IE默许的垂直转动条(DisabledIEdefaultVerticalScrollbar)
默许情形下，即便内容合适窗口巨细，IE(译注：IE6/7)也会显现垂直转动条。你可使用overflow:auto，让转动条只在你必要时呈现。

html{
overflow:auto;
}
8、:hover伪类(:hoverPseudoClass)
IE只撑持<a>元素的:hover伪类。你可使用jQuery的hoverevent来到达不异效果。
办理办法：

/*jQueryScript*/
$(#listli).hover(
function(){
$(this).addClass(color);
},
function(){
$(this).removeClass(color);
}
);
/*CSSStyle*/
.color{
background-color:#f00;
}
/*HTML*/
<ulid="list">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

9、盒模子Hack(BoxHackModel)
这是IE里最抢手的bug了。基础的了解是，IE盘算宽度(width)的体例分歧。基于w3c尺度，一个元素总宽度应当是：
总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
可是，IE盘算宽度时没有加上添补和边框：
总宽度=margin-left+width+margin-right
更多的细节，请参考这个链接：InternetExplorer和CSS盒模子具体注释
办理办法：
利用w3c的尺度兼容形式。IE6大概以后的版天性基于w3c的尺度盘算，可是你仍然会在IE5中碰到成绩。
大概你能够用CSSHack来办理这个成绩。一切尺度兼容的扫瞄器都能读取width:180px除IE5。

#content{
padding:10px;
border:1pxsolid;
width:200px;
width:180px;
}
10、双倍边距bug(DoubleMarginBugFix)
假如你有一个分派有左/右侧距的浮动元素，IE6会使得边距双倍化。好比，margin-left:5px将会酿成10px。你能够经由过程对浮动元素增加display:inline来办理这个成绩。
办理办法：

div#content{
float:left;
width:200px;
margin-left:10px;
/*fixthedoublemarginerror*/
display:inline;
}
</p>
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

仓酷云

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。