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集锦的更多相关文章

  1. 认识hasLayout——IE浏览器css bug的一大罪恶根源 （转）

    认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...

  2. 认识hasLayout——IE浏览器css bug的一大罪恶根源

     原文地址:http://neverned.blog.163.com/blog/static/1265524200933021130561/   什么是hasLayout?hasLayout是IE特有 ...

  3. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  4. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  5. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  6. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  7. 彻底解决Google浏览器CSS居中问题

    div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!importa ...

  8. 关于IE6的一些常见的CSS BUG处理

    CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG: CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方 ...

  9. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

随机推荐

  1. [JAVA]多线程下如何确定执行顺序性

    最近在讨论一个下载任务:要求文件下载后进行打包,再提供给用户下载: 如何确保打包的线程在所有下载文件的线程执行完成后进行呢? 看看下面三个兄弟的本事: CountDownLatch.CyclicBar ...

  2. c#使用Stopwatch来计算时间间隔

    今天要记录一个接口的耗时情况,就要求去写一段测试各个代码运行时间的方法,于是就加了这么一段代码.原来的做法是在代码执行之前和之后获取系统时间,然后相减.被改成了使用c#里的Stopwatch来计算时间 ...

  3. 提升HTML5的性能体验系列之四 使用原生UI

    原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HT ...

  4. Redis学习笔记：windows上redis的安装运行

    Redis的windows版本地址https://github.com/MicrosoftArchive/redis 下载之后解压之 在当前解压目录下可以看到如下文件 在当前目录下打开命令行窗口,输入 ...

  5. 【Java】JavaWeb 登录检查及界面跳转

    场景 一般javaweb网站都有用户登录,而有一些操作必须用户登录才能进行,常见流程:用户请求-->后台判断是否登录-->没登录跳转到登录界面,登录用户正常操作 解决思路 在用过滤器过滤请 ...

  6. 55.UIbutton点击切换颜色

    #import "ViewController.h" #define width_w     [UIScreen mainScreen].bounds.size.width #de ...

  7. mysql之多表查询和pymysql模块

    一 多表查找方法 1 交叉连接:不使用任何的判断条件,生成笛卡尔积.第一个表的行数乘以第二个表的行数就等于笛卡尔积结果集的行数. mysql> select * from student,cla ...

  8. Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon

    1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...

  9. HDU1864 最大报销额

    Description 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过6 ...

  10. python之深浅copy

    深浅copy 1.赋值运算 a = [1, 2, 3] b = a a.append(666) print(b) #output:[1, 2, 3, 666] 对于赋值运算来说,a与b指向的是同一个内 ...