【转】IE浏览器CSS BUG集锦
Internet Explorer CSS Bugs
Overview
Internet Explorer is famous for not supporting many of CSS properties as well as contaning numerous bugs in the ones it supports.
This page lists problems in Internet Explorer, samples demontrating them as well as solutions where such are known.
Even though I've tried to classify the bugs based on their nature, many bugs can be classified under several sections in which case the bug will appear only under General Bugs section.
Stats
Currently the site contains 46 "General Bugs" tutorials, 5 "hasLayout Bugs" tutorials, 6 "No Support Workarounds"tutorials and 1 "Crash Bugs" tutorials; all that totals to 58 tutorials and 70 solutions.
Latest tutorial was published on: Wed Aug 19 15:38:47 2009.
The site contains 44 IE6 bugs, 28 IE7 bugs and 19 IE8 bugs.
Note on Versions
In tutorials you'll see phrases such as "Affected: IE8 and all below" or "Fixes: all versions". By "all" I mean IE6, IE7 and IE8.IE5 and IE5.5 are history and this site does not consider those versions in the tutorials and solutions.
General Bugs
This section contains IE bugs that don't quite fit into other section or can be classified into two or more sections at the same time.
Bug Name | Affected Versions | Description |
---|---|---|
Image Label Focus Bug | IE8, IE7, IE6 | <img> elements that are inside <label> elements, when clicked, do not cause the focus to be transfered to corresponding form control. |
No Auto-Margin Center on Buttons Inconsistency | IE8 | Button-like elements do not get centered when { display: block; margin-left: auto; margin-right: auto; } applied on them and `width` is not explicitly set |
Incorrect Float Shrink-Wrap Bug | IE7, IE6 | Floated elements that follow other floated elements and have `clear` set do not shrink-wrap correctly |
Document Scrollbars Overflow Inconsistency | IE7, IE6 | Unconventional default value for `overflow` on <html> element that may appear as a bug with regard to `overflow` on <body>. |
Float Squeeze Weird Gap Bug | IE7, IE6 | A gap appears between last and second last floated elements that are stacked vertically. |
Float Squeeze Duplicate Last Character Bug | IE7, IE6 | Last character of a floated element is duplicated. |
Empty Element Height Bug | IE7, IE6 | Empty elements that have "layout" obtain height |
Form Control Double Margin Bug | IE7, IE6 | horizontal margins on <input> and <textarea> elements are "inherited" from the ascendant with a margin and "layout" |
IE7 1px Dotted Border Appears As Dashed Bug | IE7 | 1 pixel dotted border appears as dashed when at least one of the border sides is styled of a width larger than 1px |
Relative Overflow Failure Bug | IE7, IE6 | Elements with `overflow` set to either `hidden` or `auto` behave as if overflow was set to `visible` when descendants that are causing overflow have position: relative set on them |
IE7 "Broken" :hover Absolute Bug | IE7 | :hover that changes left/top offsets of an absolutely positioned descendant does not appear to "work" if the element is hidden out of the view; if it's visible, the left/top offsets do not change on :hover |
Button Background Shift On :active Bug | IE8 | Background shifts up and to the left on :active state when applied to <button> or <input type="submit"> |
Ignored :focus Bug | IE8 | A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored |
Invisible Hover Border Bug | IE8 | Bottom border on :hover state either does not appear completely or is 1 pixel short (or cancels out outline) when outline is set |
Percentage Padding Margin Bug | IE8 | Vertical margins appear to collapse upon a specific combination of vertical padding set in percentages as well as border or padding set on the parent's parent |
Image Float Bullet Chaos Bug | IE8 | Incorrect position or no rendering at all of list markers (bullets) when list items have floated images |
Non-Inherited TH Text-Align Bug | IE8 | text-align value of ascendant isn’t inherited by the TH element |
32 Styles Limitation | IE8, IE7, IE6 | Styles are ignored when they are set in the 32nd (or later) style method (i.e. <style>, <link> or @import) |
Hover White Background Ignore Bug | IE7 | background does not change on :hover |
IE7 Child Selector Comment Bug | IE7 | A selector containing child selector that is followed by a comment is ignored |
Star HTML Bug | IE6 | * html selector is not ignored in IE6 (due to unversal selector being ignored when it's the first part of the selector) |
IE6 !important Ignore Bug | IE6 | !important keyword is being ignored when the same rule is set again later in the same ruleset |
PNG Image and Background Color Mismatch | IE8, IE7, IE6 | Colors specified in CSS differ from the ones used in PNG images despite having the same color code |
No Auto Margin Center Pseudo-Bug | IE8, IE7, IE6 | side margins set to value `auto` do not center a block-level element |
:first-line !important Rule Ignore Bug | IE8 | rules inside :first-line pseudo-class are completely ignored when !important modifier is used |
:first-letter Ignore Bug | IE6 | The entire :first-letter ruleset is ignored |
:first-letter !important Rule Ignore Bug | IE8 | rules inside :first-letter pseudo-class are completely ignored when !important modifier is used |
Partial Click Bug v2 | IE7, IE6 | only text is clickable/reactant to :hover on links [(optional) until the mouse cursor rolls over the actual text] |
Staircase Bug | IE7, IE6 | Floated elements stack up like a staircase |
Disappearing List Background Bug | IE6 | Background on <li>, <dt>, <dd> disappears |
noscript Ghost Bug | IE8, IE7, IE6 | <noscript> elements shows up when scripting is enabled; only borders/background is showing from it |
No Transparency Click Bug | IE8, IE7, IE6 | transparent areas of background image on links is not clickable when `filter` is used to fix PNG transparency |
List Drop Shift Bug | IE8 | Stuff in <li>s drops down below the bullet |
No Increase on <ol> Numbers Bug | IE7, IE6 | The numbers on <ol> elements do not increase on subsequent <li>s |
No Bullets on <ul> and <ol> Bug | IE7, IE6 | Bullets/numbers disappear from <ul> and <ol> elements |
No line-height Vertical Center on Images Bug | IE7, IE6 | Images are not vertically centered using line-height method |
No Background Image Bug | IE8, IE7, IE6 | No background appears in IE when background image is used (using `background` shorthand property) |
Custom Cursor Bug | IE8, IE7, IE6 | custom cursors do not appear in IE |
Leaking Background Bug | IE6 | Background leaks out from the element onto other elements that are next in the flow. |
Expanding Height Bug | IE6 | Element is longer than the specified height (mostly applies to small heights). |
Expanding Width Bug | IE6 | Element is wider than the specified width. |
Double Margin Bug | IE6 | Left and right margins are doubled on floated elements. |
Negative Margin Bug | IE7, IE6 | Part of the element that is outside the container disappears when negative margins are used |
Italics Float Bug | IE6 | Element drops below floated element with italized text. |
3px Gap Bug aka Text Jog Bug | IE6 | Elements next to a floated one either have a three pixel gap or drop below or keep shifting when several elements are floated. |
Text-Align Bug | IE7, IE6 | text-align property affects block-level elements |
hasLayout Bugs
IE bugs that are caused by elements having or not having "layout"
Bug Name | Affected Versions | Description |
---|---|---|
Scared of Floats Bug | IE7, IE6 | elements with layout clear floats instead of going around floated elements |
Border Chaos Bug | IE6 | borders displayed chaotically; e.g. drawn where not should be or missing |
Sub-Hover Bug | IE6 | Rules with selectors such as a:hover foo{} do not "work" |
Partial Click Bug | IE6 | Only text is clickable on links (<a>) that are styled with display: block and thus have extra clickable area in standard compliant browsers |
Disappearing Content Bug | IE6 | Some content disappears and reappears on scrolling or window transformation as well as minimizing and maximazing of the window. |
No Support Workarounds
Various workarounds producing effect of properties and property values which are not implemented in IE.
Workaround Name | Affected Versions | Description |
---|---|---|
No Child Selector Support Workaround | IE6 | Child selector is ignored |
Max-Height Workaround | IE6 | max-height is not supported |
Max-Width Workaround | IE6 | max-width is not supported |
Opacity | IE8, IE7, IE6 | opacity property is not supported |
Min-Width Workaround | IE6 | min-width property is not supported |
Min-Height Workaround | IE6 | min-height property is ignored |
【转】IE浏览器CSS BUG集锦的更多相关文章
- 认识hasLayout——IE浏览器css bug的一大罪恶根源 (转)
认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...
- 认识hasLayout——IE浏览器css bug的一大罪恶根源
原文地址:http://neverned.blog.163.com/blog/static/1265524200933021130561/ 什么是hasLayout?hasLayout是IE特有 ...
- 浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- 彻底解决Google浏览器CSS居中问题
div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!importa ...
- 关于IE6的一些常见的CSS BUG处理
CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG: CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方 ...
- Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...
随机推荐
- Permutation Sequence LT60
The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...
- Delegate,Action,Func,匿名方法,匿名委托,事件 (转载)
Delegate,Action,Func,匿名方法,匿名委托,事件 (转载) 一.委托Delegate 一般的方法(Method)中,我们的参数总是string,int,DateTime...这些基本 ...
- Mac 环境通用
mac 下更新 .bash_profile 文件 1.打开terminal(终端) 2.cd ~ ( 进入当前用户的home目录) 3.open .bash_profile (打开.bash_prof ...
- ubuntu安装vmare tools
在vm中安装vm tools, 点击安装 vmware tools cp VMwareTools-10.0.10-4301679.tar.gz /home/YOURNAME/ //因为cd ...
- docker 加速器配置目录
centos 7 : /lib/systemd/system/docker.service
- 导入CA证书报错 keytool error: java.lang.Exception: Input not an X.509 certificate
导入CA证书报错: keytool error: java.lang.Exception: Input not an X.509 certificate 如果你的CA证书是如下格式的: -----BE ...
- 安卓逆向学习---初始APK、Dalvik字节码以及Smali
参考链接:https://www.52pojie.cn/thread-395689-1-1.html res目录下资源文件在编译时会自动生成索引文件(R.java ), asset目录下的资源文件无需 ...
- Codeforces Round #517 (Div. 2, based on Technocup 2019 Elimination Round 2) D. Minimum path(字典序)
https://codeforces.com/contest/1072/problem/D 题意 给你一个n*n充满小写字母的矩阵,你可以更改任意k个格子的字符,然后输出字典序最小的从[1,1]到[n ...
- 百度api接口_知识积累
app_id, app_key, app_secret app_id 是用来标记你的开发者账号的, 是你的用户id, 这个id 在数据库添加检索, 方便快速查找 app_key 和 app_secre ...
- vue中的静态路由
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面 ...