3

2 つのテキスト ボックスと、div に含まれる 1 ピクセルの div が 1 つあります。親 div の高さは自動で、幅は 100% です。

このすべての後、幅と高さが 100% の別の div があります。この 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);  
}
4

2 に答える 2

7

100% の幅には、パディングやボーダーは含まれません。これらを含めたい場合は、次の css を試してください。

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
于 2013-01-08T14:53:19.870 に答える
2

ええ、ウィレムが言ったように、パディングとボーダーが追加されます。

そして、あなたが言ったように、display: tableこのdivの奇妙な選択です。

ただし、設定display: blockだけでは不十分です。水平方向の境界線も削除する必要があります。

http://jsfiddle.net/Ks4Ur/

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

編集：そして私を笑わせたAsciiArtニックネームの+1:)

于 2013-01-08T15:01:15.403 に答える