3
나는이 특별한 Firefox 전용 (나는 지금까지 알고 있었다. Safari와 Chrome에 대해서만 점검했고, Firefox 3.6을 사용했다.) CSS 버그는 현재 직장에서 사용되었고, 훨씬 더 작은 코드 스 니펫으로 문제를 재현했다. 여기 :Firefox에서이 CSS 여백 공유 (?) 버그가 발생할 수있는 원인은 무엇입니까?
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
<ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
여기에, 그래서 일반적으로 여기 일이 기대할 수있는 무엇 <ul> 위가 두 <div>의 사이에 여백 없다, 또는 것입니다 문제가 
모습의 스크린 샷입니다 실제로 Firebug의 요소 위로 마우스를 가져 가면 마진/채우기 색상이 표시되지 않습니다. 그러나 어떤 이유로 인해 <p>의 30 픽셀 마진은 <p>과 그 안에 포함 된 <div>에 모두 적용됩니다. 내 생각 엔 분명히 clearfix가있는 버그가 있다는 것입니다. 실제로이 문제가 정확히 무엇인지에 대해 잘 알고있는 사람이 있는지 궁금합니다. <br/>을 사용하면 문제가 해결됩니다. 감사!
안녕하세요, Thierry, 감사합니다! 나는 실제로 아래 답변에 대한 의견에 귀하의 게시물에 대한 참조를 만들었습니다 - 그것은 보일러 플레이트 clearfix는 귀하의 clearfix와 perishablepress clearfix의 일부 아말감입니다 보인다. Clearfix의 버전이 여전히 여백을 유지하지만 모든 브라우저에서 상단 및 하단 모두에 대해 일관성을 유지한다는 것을 올바르게 이해하고 있습니까? – Johnny
안녕하세요 Johnny, 정확합니다. Boilerplate의 clearfix 기술이 내 것이기 때문에 (내 YUIBlog 게시물에 링크되어 있음) 알아 냈습니다. 내 생각 엔 그들이 이전에 가지고 있던 규칙을 편집 할 때 내용 값과 가시성 속성이 업데이트되지 않았다는 것입니다. Boilerplate 팀은 이에 대해 알고 있으며 조만간 업데이트해야합니다. 마진과 관련하여 네, 상자 안의 첫 번째와 마지막 두 가지 모두에 대해 ** 붕괴하지 않을 것입니다. –