FireFox与IE中CSS兼容技集锦
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块
相关文档:
预读内容对于部分网速慢,或者加载内容过多的页面,是非常有效的提高友好程度的方法。防止出现由于样式表,和关键图片加载滞后,导致的页面布局错乱,以及关键图片不能马上展示。
也可以防止由于页面信息加载不全,导致js出错。
经过一番尝试,此方法可以兼容IE及其他浏览器。
在IE下 用 new Image().src
的形式进行 ......
这里提供css滤镜代码,
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到网站页面CSS最顶端就可以实现素装。
如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head> 之间插入:
<style>
html{filter:progid: ......
/* 禁止换行 */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* 强制换行 */
.break{word-break:break-all;}
css强制不换行
div{white-space:nowrap;}
css自动换行
div{ word-wrap: break-word; word-break: normal; }
css强制英文单词断行
div{word-break:break-all;}
大家都知道连续的英文或数字会把DIV ......
在使用“float”时,因为“float”是javascript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.styleFloat);
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
this.listDiv01.style.styleFloat = "left";
this.listDiv02.style.styleFl ......
什么情况下会出现换行:
当元素设置了固定高度,并且文本长度大于标签元素的宽度时,文本会自动换行。
css强制换行使用样式:white-space:nowrap;该样式从效果上是没有浏览器差异,使用该样式后所有文字在ie和firefox下都在一行内显示。但是在IE下使用该属性值后标签元素宽度会被撑大,从而可能导致原来页面布局被破坏。
......