云南龙网

  1. 首页 > 云知道 > >

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总( 六 )

云知道


div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid #ddd;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
30：纯css解决多行文字垂直居中

复制代码代码如下:
style type="text/css"
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
/style
div class="alert"
div class="alert_con"哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～/div
/div

其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行 。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中 。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的 。虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜 。另：zoom:1是为了触发hasLayout 。
31:关于flash遮盖div浮动层
(a) place Flash embed script in div container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本]
(c) set div id=flashcontent container with z-index:-1; [将外层容器的z-index设置为-1]
(d) set body tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[将浮动的iframe在容器中的zindex设置为99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css来调整flash容器和html容器的位置]
其他方案网上比较多见,不做阐述.在此说下使用第一个方案如何解决:
var so = new SWFObject(XXX.swf, flashId, 宽度, 高度, 版本, 背景色);
//设置flash不遮盖div层
so.addParam(wmode, opaque);
so.write(flashcontent);
如此设置即可让flash无法遮盖住div
32:如何处理ie6的文字行高
ie6下汉字就会显示偏上位置，而在标准浏览器中不存在这个问题字体 Tahoma,试下
不过如果有规定第一个字体是用啥的，那就只能忽略这个问题..我终于明白淘宝为啥把Tahoma字体放到第一位了

复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

推荐阅读


上一篇：使用Txtvoice将文字转换成语音的方法

下一篇：我们穿的麂皮是动物皮吗