css FF与IE兼容性总结( 三 )


Code:
style type=text/css
!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
--
/style
22. 图片垂直与容器内
Code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
style type=text/css
!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
position:absolute;
top:50%
}
img {
position:static;
position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
--
/style
divpimg src=https://www.rkxy.com.cn/dnjc/logo.gif //p/div
或者使用背景图的办法:
Code:
background:url(logo.gif) center no-repeat;
23. 如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.
Code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
meta http-equiv=Content-Type content=text/html; charset=gb2312 /
style type=text/css
!--
div {
float:left;
width:200px;
height:200px;
border:1px solid red
}
--
/style
divweb标准常见问题大全/div
divweb标准常见问题大全/div
divweb标准常见问题大全/div
24 Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的高度,超过部分超出DIV底线以外,
出现和下面的内容重叠的现象 。如果不给DIV设置高度,在Firefox中将不回因为里面的内容而撑开,而IE中就会自动根据内容撑开
解决方案:
1、在DIV内部的最后追加clear:both样式
div style=background-color:#FF0000;
div style=float:left; height:200pxJmedia Design/div
div style=float:right; height:800pxwww.jmedia.cn/div
div style=clear:both/div
/div

2、对DIV使用overflow:auto;
div style=overflow:auto;
div style=float:left; background-color:#000000;height:200px1111111111/div
div style=float:right;background-color:#000000; height:300px2222222222/div
/div

推荐阅读