1:li 边距“无故”增加
任何事情都是有原因的,li
边距也不例外。
先描述一下具体状况:有些时候li边距会突然增?加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其 低级元素ul
的padding
引?起,padding
的上下值对li
有影响,左右无影?响。所以只好笨手笨脚地把padding
去掉,换成margin
。 这是能解决问题,但往往不是我们想要的结果,或许?还会引起其他不必要的怪现象。
现在终于发现解决这个问题的方法,其实很简单,既然是有ul
引?起的,就设置ul
的显示形式为*display:inline-block;
即可,前面加*
是只?针对IE6/IE7
有效,其他浏览器并不渲染这个属性。
2:分页数字?字体用“Arial?”加粗不抖动
CSS:
body,?ul,?h1?{
font-family:Arial;
font-size:12px;
}
.page?{
text-align:center;
}
.page?a?{
display:inline-block;
padding:5px?8px;
text-decoration:none;
border:1px?solid?#09F;
background-color:#0CF;
color:#FFF;
}
.page?a:hover,?.page?.selected?{
border:1px?solid?#CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
HTML:
<h1>分页样式</h1>
<div?class="page">?
<a?href="#">1</a>?
<a?href="#"class="selected">2</a>?
<a?href="#">3</a>?
<a?href="#">4</a>?
<a?href="#">5</a>
<a?href="#">6</a>?
<a?href="#">7</a>?
<a?href="#">8</a>?
<a?href="#">9</a>?
<a?href="#">10</a>?
</div>
3:IE6?CSS选择器区分IE6
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
/IE6?专用?/
.content?{color:red;}
/?其他浏览器?/
div>p?.content?{color:blue;}
4:IE6最小高度
IE6
不支持min-height
属性,但它却认为height
就是最小高度。解决方法:
使用IE6
不支持但其余浏览器支持的属性!important
。
#container{min-height:200px;?height:auto?!important;?height:200px;}
5:IE6100%?高度
在IE6
下,如果要给元素定义100%
高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html
和body
定义height:100%;
6:IE6躲猫猫bug
在IE6
和IE7
下,躲猫猫bug
是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover
的链接,当鼠标移到那些链接上时,在IE6
下就会触发躲猫猫。
解决方法很简单:
- 在(那个未浮动的)内容之后添加一个
<span?style="clear:?both;">?</span>
- 触发包含了这些链接的容器的
hasLayout
,一个简单的方法就是给其定义height:1%
;
7:IE6绝对定位元素的1像素间距bug
IE6
下的这个错误是由于进位处理误差造成(IE7
已修复),当绝对定位元素的父元素高或宽为奇数时,bottom
和right
会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。
8:?IE下z-index的bug
在IE
浏览器中,定位元素的z-index
层级是相对于各自的父级容器,所以会导致z-index
出现错误的表现。
解决方法:
其父级元素定义
z-index
,有些情况下还需要定义position:relative
9:?Overflow?Bug
在IE6/7
中,overflow
无法正确的隐藏有相对定位position:relative;
的子元素。
解决方法:
给外包容器
.wrap
加上position:relative;
。
10:?横向列表宽度bug
如果你使用float:left;
把<li>
横向摆列,并且<li>
内包含的<a>
(或其他)触发了?hasLayout
,在IE6
下就会有错误的表现。
解决方法:
给
<a>
定义同样的float:left
;
11:?列表阶梯bug
列表阶梯bug通常会在给<li>
的子元素<a>
使用float:left;
时触发,我们本意是要做一个横向的列表(通常?是导航栏),但IE
却可能呈现出垂直的或者阶梯状。
解决办法:
给
<li>
定义float:left;
而非子元素<a>
,或者?给<li>
定义display:inline;
也可以解决。
12:?垂直列表间隙bug
当我们使用<li>
?包含一个块级子元素时,IE6
(IE7
也有可能)会错误地给每条列表元素(<li>
)之间添加空隙。
解决方法:
方法1:
.clear{clear:both;}
清除float
来解决这个问题;
方法2:触发<a>
的hasLayout
(如定?义高宽、:使用zoom:1;
);
方法3:给<li>
?定义display:inline
;来解决此问题;另外还有一个极有趣的方法,给包含的文本末尾添加一个空格。
13:?IE6调整窗口大小的?Bug
当把body
居中放置,改变IE
浏览器大小的时候,任何在body
里面的相对定位元素都会固定不动了。
解决办法:
给
body
定义position:relative
;
14:?文本重复Bug
在IE6
中,一些隐藏的元素(如注释、display:none;
的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。
解决办法
给浮动元素添加
display:inline;
15:如何去掉点击链接时的虚线
在?CSS?中加入如下代码:
:focus{{ouline:0;}
a,a:hover{outline:none;?blur:expression(this.onFocus=this.blur());}
16:css?reset中的list-style:none
在IE6,7
下
1)当ul
不具有float:left;display:inline;
时,
无论有没有list-style:none
这个属性,列?表符都被隐藏,不占位置
2)当ul
具有float:left;display:inline;
属性时,
list-?style:none,
列表符被隐藏,但是仍然留有位置(list-style-position:inside);
未设置list-style:none;
列表符被隐藏,也不占位(list-style-position:outside)
在firefox
中只要list-style-type为none
?,则?无论list-stype-position
的值为outside
或inside
?,?list-style
都能很好的被隐藏
而在IE6,7
中,仅?设置list-style:none,
并不足以解决所有问题
在
css?reset
的时候使用?list-style:none?outside?none
?更好
17:?IE6
中伪类:hover
的使用及Bug
以前未曾遇到类似的问题,一番google,才知道这是IE6
处理CSS
伪类:hover
的Bug
。例如如下的代码:
a?{color:?#333;}
a?span?{color:?green;}
a:hover?{}
a:hover?span?{color:?red;?}
<a?href=”http://www.taobao.com“>?淘宝网?<span>?淘你喜欢?</span></a>
在IE7/FF
中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6
则无反应。所以IE6
的bug
就是如果a
?与?a:hover
的css
定义是一样的,也就是说如果a:hover
?中没有样式的改变,hover
就不会被触发。但如果在a:hover{}
增加一些特定的属性,例如
a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background:?none;}
此时hover就可以触发了。
18:去掉button按钮左右两边的留白
input,button{overflow:visible;padding:0;}
<input?type="submit"?name="button"?id="button"?value="左右留白的解决方法"?/>
19:中文字体在css中的写法
黑体
SimHei\9ED1\4F53
黑体 宋体SimSun\5B8B\4F53
宋体
新宋体?NSimSun\65B0\5B8B\4F53
新宋体 仿宋FangSong\4EFF\5B8B
仿宋
楷体KaiTi\6977\4F53
?楷体
微软正黑体Microsoft?JhengHei\5FAE\x8F6F\6B63\9ED1\4F53
微软正黑体
微软雅黑Microsoft?YaHei\5FAE\8F6F\96C5\9ED1
微软雅黑 幼圆?YouYuan\5E7C\5706
幼圆
20:IE6
下css
实现max/min-width/height
_width:expression(this.width>300?"300px":ture);?max-width:300px;
_height:expression(this.height>300?"300px":ture);?max-height:300px;
来自 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/