Taken http://blog.sina.com.cn/s/blog_6c8612790100wxsy.html
Encountered this bug. It's quite weird and funny. I do not know where a repeated text, IE6 is displayed near the present description below.
There are many solutions to this, but I do not have a valid example (because of the complexity of the site I can not use some of the methods). So I used the hack.
After the original text to add a space looks to solve this problem. However, the real reason behind the problem is due html comment tags. IE6 does not properly render it.
Solution: Use labels surrounded by comments
Remove the comment
An increasing pattern on the floating front {display: inline;}
A negative margin on a suitable floating div
Additional (such as 10 spaces) (hacky way) in the original text
2, and the relative positions of the hidden overflow (Position Relative and Overflow Hidden)
The problem encountered many times, when I was preparing a JQuery tutorial, because I use a lot of overflow hidden to achieve the layout I want.
Problems occur when the parent element is arranged to overflow hidden and the sub-element is arranged to position: relative.
CSS-Trick have a good example to demonstrate the bug. position: relative and overflow in internet explorer
Solution: the parent element to increase position: relative;
. 3 , IEs of the minimum height (Min-Height for IE)
It is very simple, IE min-height attribute is ignored. You can use the following hack to fix it. Thank Dustin Diaz.
This solution 7.x +, Safari1.2 in both work well in IE6, Mozilla / Firefox / Gecko, Opera.
Solution: Selector { min-height: 500px; height:! Auto Important; height: 500px; }
4, Bicubic image scaling (Bicubic Image Scaling)
You'll love this. IE that makes you very bad image scaling problems? If you take IE and other browsers comparison, IE reduced image looks as good as other browsers.
Solution:
img { -ms-interpolation-mode: bicubic; }
5、 PNG透明(PNG Transparency)
I guess everyone knows this, but I still put it out here for future reference.
So if you want to use transparent GIF images and can not give what you want quality, you'll need this hack for PNG's. You have to realize that if you use a PNG image as a background, you will not be able to set the background position.Solution:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…);
}
6, IFrame transparent background (IFrame Transparent Background)
In firefox and safari where you should not encounter this problem because by default, iframe background is set to transparent, but in IE, but not so. You need to use allowTransparency property and add the following CSS code to achieve the purpose.
Solution:
body {
background-color:transparent;
}
7, the default disable IE vertical scroll bar (Disabled IE default Vertical Scroll bar)
By default, even if the content for the window size, IEs (Annotation: IE6 / 7) is also displayed vertical scroll bar. You can use the overflow: auto, so that the scroll bar appears only when you need it.
{HTML
overflow: Auto;
}
8、:hover伪类(:hover Pseudo Class)
IE only supports the elements: hover pseudo-class. You can use the hover event jQuery to achieve the same effect.
Workaround:
$ ( '# List li') hover (.function () {
$(this).addClass(‘color’);
},function() {
$(this).removeClass(‘color’);
}
);
.color {
background-color:#f00;
}
9, the cartridge model Hack (Box Hack Model)
这是IE里最热门的bug了。基本的理解是，IE计算宽度(width)的方式不同。基于w3c标准，一个元素总宽度应该是：
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE计算宽度时没有加上填充和边框：
总宽度 = margin-left + width + margin-right
解决方法：
使用w3c的标准兼容模式。IE6或者之后的版本能基于w3c的标准计算，但是你仍旧会在IE5中遇到问题。或者你可以用CSS Hack来解决这个问题。所有标准兼容的浏览器都能读取w\\idth:180px 除了IE5。
#content {
padding:10px;
border:1px solid;
width:200px;
w\\idth:180px;
}
10、 双倍边距bug(Double Margin Bug Fix)
如果你有一个分配有左/右边距的浮动元素，IE6会使得边距双倍化。比如，margin-left:5px 将会变成10px。你可以通过对浮动元素添加display:inline来解决这个问题。
解决方法：div#content {
float:left;
width:200px;
margin-left:10px;
display:inline;
}
转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661540.html