-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
160 lines (159 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>IE CSS bugs</title>
<meta name="description" content="常见的 IE CSS bugs" />
<meta name="author" content="https://github.com/yanxyz/ie-css-bugs" />
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<h1 id="ie-css-bugs">IE CSS bugs</h1>
<p>这里整理一些常见的 IE CSS bugs。有错误或补充的地方，欢迎<a href="https://github.com/yanxyz/ie-css-bugs">反馈</a>。</p>
<p>下面列表按 IE 版本从高到低排列。没有指明版本号的，表示到目前的 IE 版本都有这种问题。</p>
<div id="toc">
<ul>
<li><a href="#ie-select-cursor">IE 下拉框选项的光标被改变</a></li>
<li><a href="#ie-custom-cursor">IE 自定义光标相对路径错误</a></li>
<li><a href="#ie-th-text-align">IE8+ 下 <code><th></code> 不能继承 text-align</a></li>
<li><a href="#ie-a-img">IE6-10 下 <code><img></code> 在 <code><a></code> 内时有边框</a></li>
<li><a href="#ie11-input-cursor">IE11 输入框不能改变光标</a></li>
<li><a href="#ie10-link-grey-background">IE10 a:active 时有灰色背景</a></li>
<li><a href="#ie8-focus-selector">IE8 下由 <code>:focus</code> 与其它选择符组成的复合选择符无效</a></li>
<li><a href="#ie8-first-line-important">IE8 下 <code>:first-line</code> 规则内 !important 被忽略</a></li>
<li><a href="#ie7-float-margin-bottom">IE7 下浮动元素的 margin-bottom 被忽略</a></li>
<li><a href="#ie6-float-right">IE6-7 下元素 <code>float:right</code> 时换行</a></li>
<li><a href="#ie6-z-index">IE6-7 下定位元素层叠错误</a></li>
<li><a href="#ie6-overflow-bug">IE6-7 元素 <code>position: relative</code> 溢出</a></li>
<li><a href="#ie6-staircase">IE6-7 下 <code><li></code> 不浮动而其子元素浮动，则列表呈阶梯状排列</a></li>
<li><a href="#ie6-list-width">IE6-7 下列表(ul, ol)指定宽度后列表项标记消失</a></li>
<li><a href="#ie6-button-padding">IE6-7 下按钮两侧有莫名空白</a></li>
<li><a href="#ie6-input-double-margin">IE6-7 下 <code><input> <textarea></code> margin 双倍</a></li>
<li><a href="#ie6-iframe-overflow-y">IE6-7 下 <code><iframe> overflow-y: scroll</code> 时出现与滚动条等宽的空白</a></li>
<li><a href="#ie6-7-下-1px-dotted-border-表现同-dashed">IE6-7 下 1px dotted border 表现同 <code id="ie6-1px-border">dashed</code></a></li>
<li><a href="#ie6-double-margin">IE6 下浮动元素水平 margin 双倍</a></li>
<li><a href="#ie6-3px-jog">IE6 下非浮动块内的文字与相邻的浮动块之间有 3px 的间隙</a></li>
<li><a href="#ie6-expanding">IE6 下元素会扩展它的高宽以包含它的内容</a></li>
<li><a href="#ie6-vertical-spacing">IE6 下列表项包含块级子元素时下方出现空白</a></li>
<li><a href="#ie6-absolute-1px">IE6 下绝对定位 1px 误差</a></li>
<li><a href="#ie6-img-line-height">IE6 下 文本与 <code><img></code> 等在一起时不能用 line-height 垂直居中</a></li>
<li><a href="#ie6-small-height">IE6 认为元素至少一个字符（<code>font-size</code>）高，即使是空元素</a></li>
<li><a href="#ie6-important">IE6 !important 失效</a></li>
<li><a href="#ie6-multiple-class">IE6 multiple class bug</a></li>
<li><a href="#ie6-id-class">IE6 id-class bug</a></li>
</ul>
</div>
<h3 id="ie-select-cursor">IE 下拉框选项的光标被改变</h3>
<p>IE 下打开 <code><select></code> 时，位于其它元素之上的选项 <code><option></code>，它的光标被改成下面元素的。</p>
<p><a href="demo/ie-select-cursor/">演示</a></p>
<h3 id="ie-custom-cursor">IE 自定义光标相对路径错误</h3>
<p>在 CSS 文件中指定自定义光标的路径，相对路径在 IE 下是相对于文档的路径，而不是 CSS 文件的路径。</p>
<p><a href="demo/ie-custom-cursor/">演示</a></p>
<p>解决方案：在 CSS 中指定绝对路径。若不方便使用绝对路径，则只能在页面指定。</p>
<h3 id="ie-th-text-align">IE8+ 下 <code><th></code> 不能继承 text-align</h3>
<p><a href="demo/ie-th-text-align/">演示</a></p>
<p>解决方案：<code>th {text-align: inherit}</code></p>
<h3 id="ie-a-img">IE6-10 下 <code><img></code> 在 <code><a></code> 内时有边框</h3>
<p><a href="demo/ie-a-img/">演示</a></p>
<p>解决方案：<code>img {border: none}</code></p>
<h3 id="ie11-input-cursor">IE11 输入框不能改变光标</h3>
<p>我现在用的 IE 版本是 11.0.17，已修复。</p>
<h3 id="ie10-link-grey-background">IE10 a:active 时有灰色背景</h3>
<p>解决方案: <code>a:active {background-color: transparent;}</code>：</p>
<!-- #IE8 -->
<h3 id="ie8-focus-selector">IE8 下由 <code>:focus</code> 与其它选择符组成的复合选择符无效</h3>
<p>比如 <code>:focus span</code>，在 IE11 的 IE8 模式下有效，在 IE8 下无效。至于 IE6-7 本来就不支持 <code>:focus</code>。</p>
<p><a href="demo/ie8-focus-selector/">演示</a></p>
<h3 id="ie8-first-line-important">IE8 下 <code>:first-line</code> 规则内 !important 被忽略</h3>
<p><a href="demo/ie8-first-line-important/">演示</a></p>
<!-- #IE7 -->
<h3 id="ie7-float-margin-bottom">IE7 下浮动元素的 margin-bottom 被忽略</h3>
<p><a href="demo/ie7-float-margin-bottom/">演示</a></p>
<p>解决方案: 可考虑用父元素的 <code>padding-bottom</code></p>
<h3 id="ie6-float-right">IE6-7 下元素 <code>float:right</code> 时换行</h3>
<p>非浮动元素之后的元素 <code>float:right</code> 时换行。</p>
<p><a href="demo/ie6-float-right/">演示</a></p>
<p>解决方案：或者使用定位，或者将浮动元素放到前面，<a href="demo/ie6-float-right/1a.html">演示</a>。</p>
<h3 id="ie6-z-index">IE6-7 下定位元素层叠错误</h3>
<p>定位元素不指定 z-index 时它的默认值是 auto, 但是 IE6-7 下表现为 z-index: 0， 即产生新的层叠上下文，从而让层叠错误。</p>
<p><a href="demo/ie6-z-index/">演示</a></p>
<p>解决方案：给相关元素指定 z-index。</p>
<p>注意规划网页上的 z-index，不要使用太大的值。</p>
<h3 id="ie6-overflow-bug">IE6-7 元素 <code>position: relative</code> 溢出</h3>
<p>尽管父元素 <code>overflow: auto|scroll|hidden</code>, 子元素 <code>position: relative</code> 时仍然溢出。</p>
<p><a href="demo/ie6-overflow-bug/">演示</a></p>
<p>解决方案：父元素 <code>position: relative</code>，<a href="demo/ie6-overflow-bug/1a.html">演示</a></p>
<h3 id="ie6-staircase">IE6-7 下 <code><li></code> 不浮动而其子元素浮动，则列表呈阶梯状排列</h3>
<p><a href="demo/ie6-staircase/">演示</a></p>
<p>解决方案：</p>
<ul>
<li><code><li></code> 浮动, <a href="demo/ie6-staircase/1a.html">演示</a></li>
<li><code>li {display: inline}</code> <a href="demo/ie6-staircase/1b.html">演示</a></li>
</ul>
<h3 id="ie6-list-width">IE6-7 下列表(ul, ol)指定宽度后列表项标记消失</h3>
<p><a href="demo/ie6-list-width/">演示</a></p>
<p>无解决方案，不过一般都是自定义标记。</p>
<h3 id="ie6-button-padding">IE6-7 下按钮两侧有莫名空白</h3>
<p>按钮（<code>input:submit</code>, <code>input:reset</code>, <code>input:button</code>, <code><button></code>）随着文字的增多（或者水平 padding 增大)导致按钮两侧的空白越来越大，这实际上不是真实的 padding。</p>
<p><a href="demo/ie6-button-padding/">演示</a></p>
<p>解决方案： 按钮 <code>overflow:visible</code></p>
<p>另外随着宽度的加大，按钮圆角出现锯齿。</p>
<h3 id="ie6-input-double-margin">IE6-7 下 <code><input> <textarea></code> margin 双倍</h3>
<p>当 <code><input> <textarea></code> 父元素有 hasLayout 与 margin 时，它们会有双倍 margin。</p>
<p><a href="demo/ie6-input-double-margin/">演示</a></p>
<p>解决方案，使用负 margin</p>
<h3 id="ie6-iframe-overflow-y">IE6-7 下 <code><iframe> overflow-y: scroll</code> 时出现与滚动条等宽的空白</h3>
<p><a href="demo/ie6-iframe-overflow-y/">演示</a></p>
<p>解决方案，只能去掉 <code>overflow-y: scroll</code></p>
<h3 id="ie6-7-下-1px-dotted-border-表现同-dashed">IE6-7 下 1px dotted border 表现同 <code id="ie6-1px-border">dashed</code></h3>
<p><a href="demo/ie6-1px-border/">演示</a></p>
<p>实际上各浏览器 border-style 有些差异。</p>
<!-- #IE6 -->
<h3 id="ie6-double-margin">IE6 下浮动元素水平 margin 双倍</h3>
<p>元素浮动时，水平 margin 双倍，竖直 margin 不会。</p>
<p><a href="demo/ie6-double-margin/">演示</a></p>
<p>修复方案：元素 <code>display: inline</code></p>
<h3 id="ie6-3px-jog">IE6 下非浮动块内的文字与相邻的浮动块之间有 3px 的间隙</h3>
<p><a href="demo/ie6-3px-jog/">演示</a></p>
<p>修复方案：</p>
<ul>
<li>让浮动块 margin -3px</li>
<li>让非浮动块浮动，<a href="demo/ie6-3px-jog/1a.html">演示</a></li>
</ul>
<h3 id="ie6-expanding">IE6 下元素会扩展它的高宽以包含它的内容</h3>
<p>IE6 这种表现类似于其它浏览器的 min-width/height 属性，可以利用这个特点来实现 min-width/height。但是有时会破坏布局，需要用 <code>overflow: hidden</code> 控制。</p>
<p><a href="demo/ie6-expanding/">演示</a></p>
<h3 id="ie6-vertical-spacing">IE6 下列表项包含块级子元素时下方出现空白</h3>
<p><a href="demo/ie6-vertical-spacing/">演示</a></p>
<p>解决方案比较多。比如：</p>
<ul>
<li>让子元素 hasLayout <a href="demo/ie6-vertical-spacing/1a.html">演示</a></li>
<li><code>li {display: inline}</code> <a href="demo/ie6-vertical-spacing/1b.html">演示</a></li>
</ul>
<h3 id="ie6-absolute-1px">IE6 下绝对定位 1px 误差</h3>
<p>当绝对定位的包含块的宽高为奇数时，它的 right bottom 会出现 1px 误差。</p>
<p><a href="demo/ie6-absolute-1px/">演示</a></p>
<p>解决方案，只能让包含块宽高为偶数。</p>
<h3 id="ie6-img-line-height">IE6 下 文本与 <code><img></code> 等在一起时不能用 line-height 垂直居中</h3>
<p>实现单行垂直居中，常用的办法是让容器 height 与 line-height 相等。但是容器内有 <code><img></code> <code><input></code> <code><textarea></code> <code><select></code> <code><object></code> 等，这个办法失效。</p>
<p><a href="demo/ie6-img-line-height/">演示</a></p>
<p>解决方案，对于 <code><img></code> 可以让后面的文本 <code>span {display: inline-block}</code>。</p>
<h3 id="ie6-small-height">IE6 认为元素至少一个字符（<code>font-size</code>）高，即使是空元素</h3>
<p><a href="demo/ie6-small-height/">演示</a></p>
<p>解决方案： 元素 <code>overflow: hidden</code>，<a href="demo/ie6-small-height/1a.html">演示</a></p>
<h3 id="ie6-important">IE6 !important 失效</h3>
<p>在同一个声明块内，同一个属性，无 !important 的值优先于前面有 !important 的值。</p>
<p><a href="demo/ie6-important/">演示</a></p>
<h3 id="ie6-multiple-class">IE6 multiple class bug</h3>
<p>比如 <code>.one.two</code>，表示同时有 class 值 one, two 的元素，IE6 只识别最后一个值 two，即相当于 <code>.two</code>。</p>
<p><a href="demo/ie6-multiple-class/">演示</a></p>
<h3 id="ie6-id-class">IE6 id-class bug</h3>
<p>比如：</p>
<pre class="sourceCode css"><code class="sourceCode css"><span class="fl">#id.class1</span> <span class="kw">{}</span>
<span class="fl">#id.class2</span> <span class="kw">{}</span>
<span class="fl">#id.class3</span> <span class="kw">{}</span></code></pre>
<p>只有第一个 #id.class1 有效，后面的忽略。</p>
<p><a href="demo/ie6-id-class/">演示</a></p>
<a href="https://github.com/yanxyz/ie-css-bugs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</body>
</html>