zoukankan      html  css  js  c++  java
  • IE 和 Firefox 下 CSS 中 marginleft IE显示为两倍的解决

    IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决

    时间:2009-08-19 16:25来源:未知 作者:admin 点击: 93次

    另:当使用margin属性不能正确显示时,尝试使用display:inline;看能否解决问题

    问题描述
    一个html页
    <div style="190px; margin-left:10px; overflow:auto; background-color:#FFCCFF; float:left;">test</div>
    但是左侧却显示缩进了20个px
    此设置在firefox 和 opera 都是正常的
    网上查找了原因发现是IE的一个BUG
    在style里面添加display:inline;问题解决

    另:当使用margin属性不能正确显示时,尝试使用display:inline;看能否解决问题

     

     

    在IE6中有一个大家经常碰到的bug,margin在碰到float时会距离会加倍。解决这个bug方法是多加一个无用的CSS定义:display:inline;你可以对比下面的例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>CSS在线-示例</title>
    <style type="text/css">
    #parent{300px;height:300px;background:blue}
    #addinline{display:inline;float:left;200px;heigt:100px;margin-left:10px;background:red;}
    #notaddinline{float:left;200px;heigt:100px;margin-left:10px;background:green;}
    </style>
    </head>
    <body>
    <div id="parent">
    <div id="addinline"></div>
    <div id="notaddinline"></div>
    <div>
    </body>
    </html>

    从上面的例子中可以看出,加了display:inline的div的margin属性正确的显示了我们设置的距离,而没有加的div则是2倍margin设定值。

  • 相关阅读:
    程序员修炼之道读书笔记02
    程序员修炼之道读书笔记01
    2021年1月30日 体温上报app03(百度API的获取和配置方法)
    2021年1月28日 体温上报app02
    2021年1月27日 体温上报app01
    2021年1月26日 sqlite数据库
    2021年1月25日 列表与适配器
    16.CSS margin用法
    14.CSS 块级元素与行内元素
    12.CSS 简单认识margin
  • 原文地址:https://www.cnblogs.com/HughTan/p/1727972.html
Copyright © 2011-2022 走看看