CSS兼容IE Firefox大全
IE的问题:
一.双边距问题
浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。
解决方法:在此浮动元素增加样式 display:inline;
二.图片产生的间隙
父元素直接包含<img>,这个图片下方会和父元素边缘产生间隙。
解绝方法:1.在源代码中让</div>和<img>在同一行,因为那个间隙是由换行符产生的。
2.给<img>添加样式 display:block;
三.最小高度问题
块元素最小高度为10px,当高度定义小于10px时,仍为10px;
解决方法:为此块元素添加样式 overflow:hidden; 或 让此款块元素的字体大小等于此会元素的高度。
四.列表的li为浮动,则列表后面的元素不能换行的问题
列表的li为浮动,则列表后面的元素不能换行。
解决方法:为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。
五.子元素的上下外边界问题(父元素没有定义高度时)
在父元素没有定义高度时,子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。
解决方法:给父元素定义内边距或边框。
firefox问题:
一.列表的li为浮动,则列表后面的元素不能换行的问题
列表的li为浮动,则列表后面的元素不能换行。
解决方法:为这个ul定义合适的宽高或给包含这个ul 的父div定义合适的宽高。
二.子元素的上下外边界问题(父元素没有定义高度时)
在父元素没有定义高度时,子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。
解决方法:给父元素定义内边距或边框。
二者之间的兼容问题:
一.水平居中
IE6:使用text-align不但能使文本居中,还能使嵌套的块元素居中。
FF2:使用text-align只能使文本居中。
解决方法:在需要居中的块元素添加margin:0 auto;
二.div高度自适应问题
IE6:如果内容的高度超过父元素的高度,父元素的高度会增加。
FF2 : 如果内容的高度超过父元素的高度,内容不会隐藏,父元素的高度也不会增加。
解决方法:(假定最小高度为50px)在父元素添加 min-height:50px;
 
相关文档:
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也 ......
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存。
例如:
CSS代码
a:hover{background:url(imagepath)}
常用的解决方案:
在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。
......
预读内容对于部分网速慢,或者加载内容过多的页面,是非常有效的提高友好程度的方法。防止出现由于样式表,和关键图片加载滞后,导致的页面布局错乱,以及关键图片不能马上展示。
也可以防止由于页面信息加载不全,导致js出错。
经过一番尝试,此方法可以兼容IE及其他浏览器。
在IE下 用 new Image().src
的形式进行 ......
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
<html>
<head>
<mce:style type = "text/css"><!--
table
{
border-collapse:collapse;
}
td
{
border:solid 1px black;
}
--></mce:style><style type = "text/css" mce_bogus="1">table
{
border-collapse:collapse;
}
td
......