Firefox 100％宽度过度父分区

我有两个文本框，一个div中包含一个1 px div。父div具有自动高度，宽度为100％。Firefox 100％宽度过度父分区

毕竟这是另一个div是100％的宽度和高度，这个div在Webkit中正确显示，但它超过了父div的边界约2-3像素。

这里是所有相关的代码，我已经把它缩小到只是这些，并且我已经通过着色背景红色在Firefox中检查了父div的宽度和高度，并且当我做这件事时它不扩展（红色）那。

我的确似乎记得阅读关于必须告诉Firefox或Webkit等的东西......如何定义宽度，但我不记得CSS，因此我花了大约45分钟的时间搜索一切，我可以尝试和再次找到它。

HTML

<!-- CREDENTIALS --> 
      <div class="centreLoginForm-Credentials"> 

       <div id="disabledDiv"></div> 

       <input id="usernameCred" class="textInput top" type="text" placeholder="Username"> 
       <!--<div class="dividerDiv textBoxGrey"></div>--> 
       <input id="passwordCred" class="textInput bottom" type="password" placeholder="Password"> 

      </div> 
      <!-- CREDENTIALS END -->

CSS

.centreLoginForm-Credentials 
{ 
    width: 100%; 
    height: auto; 

    position: relative; 

    margin-top: 10px; 

    display: table; 

    background-color: rgb(255, 255, 255); 

    box-shadow: 0px 0px 3px rgba(200, 200, 200, 0.3); 

    border-radius: 3px; 
    border: 1px solid rgba(230, 230, 230, 1); 
} 

#disabledDiv 
{ 
    position: absolute; 

    /*z-index: -10;*/ 

    width: 100%; 
    height: 100%; 

    box-shadow: inset 0px 0px 30px rgba(220, 220, 220, 1); 
}

来源

2013-01-08 ツ.jp

刚刚尝试了一些东西：**我删除了** display：table **，**不确定为什么仍然存在，它解决了问题。我很困惑，为什么它修复它，任何人都可以点亮？ –

的100％的宽度不包括填充和/或边界。如果你想包括这些尝试这个CSS：

box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box

来源

2013-01-08 14:53:19 Willem

是的，正如威廉说，填充和边框被添加。

正如你所说，display: table是这个div的一个奇怪的选择。

但单独设置display: block是不够的，你应该删除水平边框太：

http://jsfiddle.net/Ks4Ur/

display: block; 
border-left: none; 
border-right: none;

编辑：和+1的AsciiArt缺口，让我笑:)

来源

2013-01-08 15:01:15

Firefox 100％宽度过度父分区

回答

相关问题