当前位置:首页 > Div + CSS

XHTML+CSS兼容性解决方案小集

canca18年前 (2008-04-07)Div + CSS579

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px}

关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义:

ul{margin:0;padding:0;}

就能解决大部分问题。

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为:

<script  type="text/javascript">

就可以了。

5.如果你在BOX容器里使float和text-align的方向设为一致:

{float:left;text-align:left;margin:0 0 0 200px;}

我们可做如下修改:

{float:left;text-align:left;margin:0 0 0 200px;display:inline;}

扫描二维码推送至手机访问。

版权声明:本文由Ant.Master's Blog发布,如需转载请注明出处。

本文链接:https://iant.work/post/464.html

标签: Div + CSS
分享给朋友:

“XHTML+CSS兼容性解决方案小集 ” 的相关文章

CSS Hack 汇总快查

屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px  !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/ select:empty {font:12px  !importan…

如何处理不同浏览器之间的样式表的兼容性问题

IE 不支持 "min-height" 样式本站是这样解决的:.contents { ... ...; min-height:380px; ie-only:expression(this.style.height="390px"); } 兼容 IE 和 Mozilla 的 hr 定义Mozilla…

用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。CSS: filter:alpha(opacity=50);       /* I…

[CSS Filter and Hacks] 解決IE vs Firefox等浏览器排版显示不同题

万恶IE成为大家的箭靶也不是第一天了,除了安全漏洞外,最让网页开发者头痛的就是CSS支持的问题,每次在IE上排版完后,在Firefox上看就完全不一样,在Firefox上排好则IE又乱掉了。关于IE或是其它浏览器在显示上面的问题打算整...…

IE Firefox Hack

IE都能识别*,标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别 !important;IE7能识别*,也能识别 !important;FF不能识别*,但能识别 !important;例如style="*width:10px;!important width:20px;"这样在IE6下宽度…

Opera hack

@media all and (min-width:0px){  选择符 {样式内容}}…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。