我遇到了一个有趣的问题,就像带有文本的DIV占用Firefox和Chrome中的空间一样。我有一个水平扩展的条形图,每个条形图由垂直条和下面的标题组成。
<div class="verticalChart">
<div class="singleBar">
<div class="bar"><!-- contents set by javascript, equal size for all bars--></div>
<div class="title">What is a fraction</div>
</div>
<div class="singleBar">
<div class="bar"></div>
<div class="title">Unit Fractions on Number Line</div>
</div>
[...] <!-- more bars -->
</div>
我将以下CSS应用于每个条形下方的标题,以确保它们的底部位于相同的y坐标。我允许文本占用最多3行,然后溢出可见框:
.verticalChart .singleBar .title {
font-size: 10px;
line-height: 1.0em;
min-height: 3.0em;
max-height: 3.0em;
overflow: hidden;
margin-top: 5px;
text-align: center;
white-space: normal;
}
我基本上需要标题栏的高度始终相同,否则条形图将不对齐。有趣的是,这似乎在Firefox中运行得很好:
但Chrome浏览器是禁止的:
我怀疑,基于摆弄这些数字,Firefox中的最小高度与Chrome中的最小高度不同:
这到底发生了什么?我是否可能以错误的方式实现标题栏的“最小高度”效果?是否有更多跨浏览器友好的方法?
非常感谢!
编辑:
JSFiddle按照大众需求:http://jsfiddle.net/YJHrY/4/
答案 0 :(得分:2)
正如我想的那样,你使用的是一个显示属性,其值为inline-block,默认情况下与底部对齐。
http://jsfiddle.net/YJHrY/5/
在.verticalChart .singleBar
中添加vertical-align:top.verticalChart .singleBar {
/* FrontRow Edits */
width: 4.4%;
display: inline-block;
margin:0 1% 0% 1%;
float: none;
vertical-align: top;
}