我只是在阅读Apache的css设计模式,并且在块元素中存在溢出内联元素的问题。这是链接
http://www.cssdesignpatterns.com/Chapter%2004%20-%20BOX%20MODELS/Inline%20Box/example.html
你可以看到带有类“box”的内联元素在chrome中保持在同一个行框中,但是转到firefox中的下一行,而所需的行为就是firefox所做的。 任何人都可以向我解释为什么firefox和chrome有区别???
这是html:
<div class="container">
<span class="default">BEFORE</span>
<span class="box">← Left ↑ Top
Bottom ↓ Right → </span>
<span class="default">AFTER</span>
</div>
这是css
.container {
border: 1px solid gray;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
.box {
line-height: 100px;
margin-left: 100px;
margin-right: 100px;
padding: 20px 120px;
border-left: 5px solid gray;
border-right: 5px solid black;
border-top: 5px solid gray;
border-bottom: 5px solid black;
background-color: gold;
overflow: scroll;
width: 99999px;
height: 99999px;
margin-top: 99999px;
margin-bottom: 99999px;
}
.default {
line-height: normal;
width: auto;
height: auto;
overflow: visible;
visibility: visible;
margin: 0;
padding: 0;
border: none;
background-color: gold;
}
这是小提琴链接
答案 0 :(得分:0)
尝试给容器一个宽度和填充:
.container {
border: 1px solid gray;
width: 350px;
}
这是一个小提琴:http://jsfiddle.net/GRwUp/1/