1.背景图片的问题,
原来的写法: background: url(images/jtnews.jpg) no-repeat 5% 50%;出现浏览器不兼容问题,
修改为 background: url(images/jtnews.jpg) no-repeat 5px center;正确,不知道什么原因。
2.禁止换行问题
white-space:nowrap;禁止换行,设置了宽度。容易出现半个字,对于中英文,标点还有问题。
white-space:inherit;无论中英文,和标点,都可以在一行显示。不会出现半个字。
3.双倍边距问题,
浮动的同时应用了左边距才会有双倍边距
dicplay:inline:解决。
4.使一个div(已知高度)垂直居中的方法一:(margin都是宽度和高度的负值的一半)
.centipede {
position:absolute;
top:50%;
left:50%;
margin:-113px 0 0 -50%;
width:100%;
height:226px;
}
原理:
1、先让这个DIV绝对定位;
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽的一半就可以了,也就是50%; 向上呢也同理;
高度末知要想兼容不太容易
绝对定位IE6 BUG 问题:
绝对定位嵌套在相对定位的容器中,IE6处理时会出现问题,原因在于相对定位的容器没有获得布局,为了在IE6中显示正常,需要迫使相对定位的容器拥有布局。
"绝对定位的元素,相对于最近的已定位的祖先元素"
绝对定位的元素,相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块
原来的写法: background: url(images/jtnews.jpg) no-repeat 5% 50%;出现浏览器不兼容问题,
修改为 background: url(images/jtnews.jpg) no-repeat 5px center;正确,不知道什么原因。
2.禁止换行问题
white-space:nowrap;禁止换行,设置了宽度。容易出现半个字,对于中英文,标点还有问题。
white-space:inherit;无论中英文,和标点,都可以在一行显示。不会出现半个字。
3.双倍边距问题,
浮动的同时应用了左边距才会有双倍边距
dicplay:inline:解决。
4.使一个div(已知高度)垂直居中的方法一:(margin都是宽度和高度的负值的一半)
.centipede {
position:absolute;
top:50%;
left:50%;
margin:-113px 0 0 -50%;
width:100%;
height:226px;
}
原理:
1、先让这个DIV绝对定位;
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽的一半就可以了,也就是50%; 向上呢也同理;
高度末知要想兼容不太容易
绝对定位IE6 BUG 问题:
绝对定位嵌套在相对定位的容器中,IE6处理时会出现问题,原因在于相对定位的容器没有获得布局,为了在IE6中显示正常,需要迫使相对定位的容器拥有布局。
"绝对定位的元素,相对于最近的已定位的祖先元素"
绝对定位的元素,相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块
绝对定位嵌套在相对定位的容器中,IE6处理时会出现问题,原因在于相对定位的容器没有获得布局,为了在IE6中显示正常,需要迫使相对定位的容器拥有布局。
一种方法就是设定width和height,可以使用只对IE有效的CSS招数,设定height为1%,如
* html .container { height : 1%; }