Question

在IE中正确显示但在FF中显示不正确：

<div class="main_div" dir="rtl">
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
</div>

=======================

body{
    margin: 0px;
    padding: 0px;
}

div.main_div{
    border: dotted; 
    border-width: thin;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background: #ffffaa;
    border-color: #FFCC66;
    width: 100%;
    float: right;
}

div.outer_div{
    float: right;
    width:33%;
}

div.textformatting{
    float: right; 
    padding-bottom : 5px;
    padding-top  : 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: dashed;
    border-width:thin  
}

div.inner_div{
    float: right;
    width: 50%;
    border: dotted;
    border-width: thin;
}

“Inner_div”中的浮动不起作用！

Answer 1

如果在元素中添加填充，IE和FF会给出不同的结果。例如如果你有一个width:100px;和padding:10px;的div，IE会给你一个宽度为100px，所有边都有10px填充的<div>，这样你内部的空间宽度只有80px。在FF中，它将为您<div>提供100px宽度和10px填充的所有边，这将为您提供总共120px宽度的<div>。

记住边框会在总宽度上增加1px，因为您使用的width:50%会产生50％+ 1px，这就是为什么inner_div没有正确float:right的原因。但如果您使用固定宽度，则可以使用display:inline

无论如何试试这个

<div class="main_div" dir="rtl">
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>
<div class="outer_div" dir="rtl">
    <div class="textformatting" dir="rtl">
        <div class="inner_div"> text </div>
        <div class="inner_div"> Image </div>      
    </div>
</div>

=============================================== ===============

body{
    margin: 0px; 
    padding: 0px;
}
div.main_div{
    border:1px dotted #FFCC66; 
    border-width:thin; 
    background: #ffffaa; 
    width: 100%; 
    overflow:hidden;
}
div.outer_div{
    float: right; 
    width:33.33333%; 
    background-color:#FF0000;
}
div.textformatting{
    float: right; 
    margin:5px 10px; 
    border: dashed; 
    border-width:thin; 
    overflow:hidden; 
    width:95%;
}
div.inner_div{
    float: right; 
    width: 49%; 
    border: dotted; 
    border-width: thin;
}

在div标签中浮动dosen't在Firefox中工作

1 个答案: