Firefox 100 % 너비 초과 부모 파트

두 개의 텍스트 상자가 있고 div에 하나의 1xpx div가 있습니다. 상위 div에는 너비가 100 % 인 자동 높이가 있습니다.Firefox 100 % 너비 초과 부모 파트

이 모든 것이 100 % 너비와 높이 인 div입니다.이 div는 Webkit에 올바르게 표시되지만 상위 div의 테두리는 약 2-3 픽셀만큼 지나치게 넓습니다.

여기 모두 관련 코드가 있습니다. 필자는 이것들을 최대한 좁혔습니다. 파이어 폭스에서 배경색을 빨간색으로 채색하여 부모 div의 너비와 높이를 확인했습니다. 그러면 빨간색으로 변합니다. 그.

파이어 폭스 또는 웹킷 등을 말하면서 폭을 정의하는 방법을 읽는 것을 기억하는 것 같습니다. 그러나 CSS를 기억하지 못하고 약 45 분을 소비했습니다. 다시 찾는다.

HTML 100 % 폭 패딩 및/또는 테두리를 포함하지 않는

.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

만든 AsciiArt 닉에 대한 1과 :

http://jsfiddle.net/Ks4Ur/

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

편집 그냥 빨리 뭔가를 시도 : ** 나는 ** 표를 제거 ** **, ** 그것이 아직도 거기에 있었는지 확실하지 않고 문제가 해결되었습니다. 나는 그것이 그것을 고쳤던 이유에 관해서 혼란 스럽다, 누군가 약간의 빛을 비췄을 수 있냐? –

<!-- 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. 이것을 포함 시키려면 다음을 시도하십시오 :

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

출처

2013-01-08 14:53:19 Willem

예, Willem이 말했듯이 패딩과 테두리가 추가되었습니다.

그리고 말씀 드렸듯이 display: table은이 div에 대한 이상한 선택입니다.

그러나 혼자 display: block을 설정하면 당신도 수평 테두리를 제거해야합니다, 충분하지 않습니다 : 날 웃게 :)

출처

2013-01-08 15:01:15

Firefox 100 % 너비 초과 부모 파트

답변

관련 문제