Question

我有一个问题，Firefox显示:(但IE显示正确）

<div id="main_div" dir="rtl">
    <div dir="rtl">
          <div class="outer_div" dir="rtl"> Text! </div>
    </div>
    <div dir="rtl">
          <div class="outer_div" dir="rtl"> Text! </div>
    </div>
    <div dir="rtl">
          <div class="outer_div" dir="rtl"> Text! </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; 
padding-bottom : 5px;
padding-top  : 5px;
padding-left: 10px;
padding-right: 10px;
width: 33.3%;
border: dashed; 
border-width:thin  
}

为什么会这样？！ TNX

Answer 1

使用基于％的大小调整时，不能使用基于像素的填充。即便是IE也没有做对。如果你仔细观察（并改变窗口的大小），你的第一个div的左边会有一个空白区域。当你添加填充时，它会增加div本身的大小，所以你有一个33.3％宽度+ 20px（左右）的div。 IE错误地解释了这一点，并为您提供了看似可用的结果。 Firefox会“按原样”解释这个问题，然后你会得到浮动的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.3%; 
border: dashed;  
border-width:thin   
} 

div.textformattingclass{
padding: 5px 10px 5px 10px; 
}

HTML元素

<div id="main_div" dir="rtl"> 
    <div class="outer_div" dir="rtl"> 

          <!-- remove all content formatting from the style for the outer_div
               and place it in a style for this sub-div //-->

          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
    <div class="outer_div" dir="rtl"> 
          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
    <div class="outer_div" dir="rtl"> 
          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
</div>

Answer 2

您缺少外部div的结束标记，而且，页面上没有div应该具有相同的ID ...您应该使用class属性：）

firefox不支持div宽度

2 个答案: