최소 너비의 WebKit에서 버그가 있습니까?

시간당 웹 사이트 헤더를 이상하게 렌더링하는 데 어려움을 겪었으며 WebKit (예 : 최신 Chrome)에 버그가있는 것 같습니다. 벌레 야? 또는 나는 무엇인가 놓치고 있냐? 여기최소 너비의 WebKit에서 버그가 있습니까?

는 http://jsfiddle.net/y415st6s/

내가 구분이 사이트 제목 및 페이지 제목 사이에 표시하지만, 사이트 제목 위로 넘쳐 단지 국경을 얻을 것으로 기대한다. 나는 최소 너비를 사용하여 "사이트 제목"이있는 블록의 너비를 설정했으며 FireFox 및 IE에서 잘 작동하는 것으로 나타났습니다. WebKit에서는 내부 패딩이 최소 너비를 가진 블록의 외형 치수에 포함되지 않는 것처럼 보입니다. '너비'도 같은 값으로 설정되면 문제가 사라지는 것 같습니다 (jsfiddle CSS의 28 행 참조).

enter image description here

그것은 내가 그것을 올바른 방법으로하고있어 보인다, 그래서 너무 '폭'오버라이드 (override) 할 필요가 단지 최소 폭을 설정 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width에 따르면. 복사/붙여 넣기에 대한

직원 ...

HTML

<header class="siteHeader hstackpanel"> 
    <div> 
     <div class="siteHeader__logoArea hstackpanel"> 
      <div class="siteHeader__logoIcon"> 
       <img src="http://static.flaticon.com/png/16/1394.png"> 
      </div> 
      <div class="siteHeader__logoText hstackpanel-autofit">Site Title</div> 
      <div class="siteHeader__logoButtons"> 
       <img src="http://static.flaticon.com/png/16/9916.png"> 
       <img src="http://static.flaticon.com/png/16/57164.png"> 
      </div> 
     </div> 
    </div> 
    <div> 
     <!-- box with blue border --> 
     <div class="siteHeader__splitter"></div> 
    </div> 
    <div class="hstackpanel-autofit"> 
     <div class="siteHeader__titleArea hstackpanel"> 
      <div class="hstackpanel-autofit"> 
       <div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit"> 
        <span class="siteHeader__pageTitleText">Current Page Title</span> 
       </div> 
      </div> 
      <div> 
       <div class="siteHeader__titleAreaButtons hstackpanel"></div> 
      </div> 
     </div> 
    </div> 
</header>

CSS

* { 
    box-sizing: border-box; 
} 
.hstackpanel { 
    display: table; 
    width: 100%; 
} 
.hstackpanel > div { 
    display: table-cell; 
    position: relative; 
    vertical-align: middle; 
    padding: 2px; 
} 
.hstackpanel > div:not(.hstackpanel-autofit) { 
    white-space: nowrap; 
    width: 0.01px; 
} 
img { 
    width: 16px; 
    height: 16px; 
} 
.siteHeader { 
    background: yellow; 
    n_height: 24px; 
} 
.siteHeader__logoArea { 
    min-width: 270px; 
    /* width: 270px; */ 
    padding: 4px 8px; 
    background: green; 
} 
.siteHeader__splitter { 
    border: 1px solid blue; 
    width: 8px; 
    height: 24px; 
} 
.siteHeader__titleArea { 
    padding: 4px 8px; 
    background: green; 
}

출처

2014-11-12 Xtra Coder

크롬과 사파리는 테이블 요소에 대한 최소 폭 속성을 지원하지 않습니다. 그러나 테이블 셀에 적용 할 때 최소 폭을 존중합니다. divdiv에 display: table을 적용하고 있습니다.

출처

2014-11-12 17:24:53 eclipsis

"Chrome은 테이블의 최소 너비를 지원하지 않습니다."는 100 % 사실이 아닙니다. "최소 너비"를 제거하면 레이아웃이 크게 변경되지만 "최소 너비"출력은 버그가 있습니다. –

최소 너비의 WebKit에서 버그가 있습니까?

답변

관련 문제