`

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

阅读更多

使用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;}

分享到:
评论
4 楼 haiker 2010-08-22  
把<ul> tag加一个style就可以了,这是margin collapsing问题。而且是个比较特殊,且常见的margin collapsing:对于包含在块级元素里面的块级元素也会出现margin collapsing现象,也就是说<box><box><box></box>那么两个元素外margin是按照两个box较大的来定。ul元素有margin值,而id为"content2"元素margin为默认的0px。综上,所以外margin的值取ul的margin值,就会出现两个div之间的空白。垃圾IE不符合css2规范,当然没有应该出现的margin了。欢迎大家和我讨论: qq:414751
<div id="cotent2">
  <ul style="margin:0px;">
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
  </ul>
</div>



catest在上个帖子中说
引用:
帮楼主添点麻烦(:
今天又碰到了一个问题,是这样的:
分别定义两个div:#top1 #content2,想要实现两个区域上下紧挨着排列(!*不要有间隙*!),最后竟然发现在ie里可以很顺利的实现,在其他浏览器里却总有偏差,表现是两个区域中间总会有空白!
代码如下:
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>bug?</title>
<style type="text/css">
<!--
#top1 {
    top: 0px;
    background: #666666;
    height: 80px;
    width: 760px;
    margin: 0px auto auto;
    padding: 0px;
}
body {
    margin: 0px;
    padding: 0px;
}
#cotent2 {
    top: 0px;
    background: #cc3300;
    height: 480px;
    width: 760px;
    margin: 0px auto auto;
    padding: 0px;
}
-->
</style>
</head>
<body>
<div id="top1">此处显示 id "top1" 的内容</div>
<div id="cotent2">
  <ul>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
    <li>此处显示 id "cotent2" 的内容</li>
  </ul>
  <p>&nbsp;</p>
</div>
</body>
</html>
3 楼 haiker 2010-08-22  
 今天逛论坛时又发现了这个bug,才发现我做的网站大多数都有这个bug,却没意识到。原来我一直用IE为标准,用它来做出“正常”的效果,然后去firefox里改“不正常”的效果,看来完全搞反了~~~被IE骗了!不多说了,看下面:
  如果你在BOX容器里使float和text-align的方向设为一致
复制内容到剪贴板
代码:
{float:left;text-align:left;margin:0 0 0 200px;}
那么对不起,IE会把左边这个距离翻倍!也就是说400px!
我们可做如下修改:
复制内容到剪贴板
代码:
{float:left;text-align:left;margin:0 0 0 200px;display:inline;}
详细文章请看:http://www.omemo.net/talk/viewtopic.php?t=3
2 楼 haiker 2010-08-22  
这个我知
width /**/:340px
IE6会避过这句,对IE5有作用
1 楼 haiker 2010-08-22  
使用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">
就可以了

  暂时只想到这么多了,以后遇到问题我会继续写。如果有错误的话,谢谢大家指出来,我也能从中学习,呵:)

相关推荐

    H3C总代数据中心解决方案培训资料小集.zip

    H3C数据中心云计算解决方案技术文档 电视台数据中心建设方案 基于IRF的安全板卡设计 (NXPowerLite) 运营商IDC数据中心 运营商IDC数据中心拓展手册(办事处)V3.0 主打胶片_数据中心IRF虚拟化解决方案 (NXPowerLite)

    CSS常用代码小集

    `zoom` 属性主要用于IE浏览器,以兼容性的方式实现缩放效果。 `filter` 属性用于对元素应用图形效果,如模糊或颜色偏移等。`progid:DXImageTransform.Microsoft.AlphaImageLoader` 是一个IE浏览器特有的滤镜,用于...

    知识小集微信小程序

    【知识小集微信小程序】 微信小程序是腾讯公司推出的一种轻量级的应用开发平台,它允许开发者在微信内创建原生体验的应用程序,无需通过应用商店即可实现快速分发和使用。这个“知识小集微信小程序”很可能是为分享...

    GAS汇编指令小集html格式

    GAS汇编指令小集GAS汇编指令小集GAS汇编指令小集GAS汇编指令小集GAS汇编指令小集GAS汇编指令小集GAS汇编指令小集

    PCI转并口-打印口,USB驱动小集

    同时,兼容性和稳定性也是评估驱动程序质量的重要指标。有时,当操作系统更新或设备遇到问题时,可能需要重新安装驱动或寻找最新的驱动版本以解决问题。 总之,"PCI转并口-打印口,USB驱动小集"是一个解决新电脑...

    Excel实用技巧小集

    2. **Exceljet**:专注于Excel技巧和解决方案的网站。 3. **Excel Easy**:提供逐步指南和实例,适合初学者。 4. **Wikipedia Excel教程**:详细的百科全书式教程。 5. **Stack Overflow**:编程问题解答社区,也...

    FreeRTOS资料小集.CHM

    FreeRTOS资料小集.CHM

    HTML(CSS) 滤镜应用

    此外,滤镜功能在不同浏览器间的兼容性需要注意,尤其是老版本的浏览器可能不支持某些滤镜。开发者应该使用浏览器的检测工具,确保在多数设备上能正常工作。 在“滤镜小集”这个文件中,可能会包含各种滤镜效果的...

    知识小集微信小程序.zip

    通过这个"知识小集微信小程序"项目,开发者不仅可以提升自己的微信小程序开发技能,还能了解到实际项目中的最佳实践和常见问题解决方案。同时,与博主的互动也能增强学习过程中的交流和协作能力,对于个人技术成长...

    .N E T 小集 chm帮助文档

    总之,这个.NET小集CHM文档很可能是针对.NET开发者的一份宝贵资源,包含了实际项目中可能遇到的问题及其解决方案。通过学习这些内容,开发者可以提升自己在.NET开发中的技能,更好地应对各种挑战,提高工作效率。

    对联基础知识小集.pdf

    对联基础知识小集.pdf

    java面试问题小集

    【Java面试问题小集】 1. **String 与 StringBuffer 的区别** String 是不可变对象,每次修改都会创建新的对象,而 StringBuffer 是可变对象,修改时不会创建新对象,因此在频繁修改字符串的情况下,使用 ...

    DWR 实用例子小集

    **DWR(Direct Web Remoting)实用例子小集** DWR(Direct Web Remoting)是一种在Web应用程序中实现Ajax(Asynchronous JavaScript and XML)技术的Java库。它允许JavaScript在客户端与服务器端进行直接交互,使得...

    CSS简写小集

    1.border(CSS边框)简写: border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;可以简写为: border:1px solid #000; 2.padding(CSS padding)简写:...

    IIS安装问题小集 100%解决

    Server Application Error Microsoft JET Database Engine (0x80004005) 100%解决,我用了N多电脑了,解决率100%. 安装包里面是网页形式,我觉得用网页查看会更直观。

    最新浪漫温馨短信小集.doc

    最新浪漫温馨短信小集.doc

Global site tag (gtag.js) - Google Analytics