Firefox 不支持 div 宽度答案

【问题标题】：firefox dosen't support div widthFirefox 不支持 div 宽度
【发布时间】：2010-09-28 00:10:59
【问题描述】：

我在 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

【问题讨论】：

Firefox 显示什么？您刚刚粘贴了一些 HTML，其中缺少 </div>... 是这个问题吗？
什么版本的火狐？什么版本的 IE？
Opera 和 Chrome 的工作方式与 Firefox 相同，那么这告诉我们关于 IE 的什么信息？永远不要使用 IE 作为工作方式的参考。
firefox V3.5 和 IE V8.0

标签： css html cross-browser

【解决方案1】：

在使用基于 % 的大小时，您不能使用基于像素的填充。甚至 IE 也无法做到这一点。如果您仔细观察（并更改窗口的大小），您的第一个 div 的左侧有一个空白区域。当您添加填充时，它会增加 div 本身的大小，因此您的 div 宽度为 33.3% + 20px（左右）。 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>

【讨论】：

@user458975 - 除了 html 部分，您没有更改任何内容。为了使它起作用，您必须更改样式以将填充与宽度规范分开。我将编辑我的答案来阐述。

【解决方案2】：

您缺少外部 div 的结束标记，而且页面上的任何 div 都不应具有相同的 ID...您应该使用 class 属性:)

【讨论】：

我解决了这个问题（输入缺少的 div 和 id 更改为类）但仍然有同样的问题！