html – chrome和firefox之间的div大小不一致

2023年2月1日 200次阅读

我遇到了一个有趣的问题,就像带有文本的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中的最小高度不同：

>在Firefox中,将min-height减少到3em以下将删除不需要它的标题div中的额外行,错误地对齐它们上方的条形.
>在Chrome中,更改最小高度仅用于推动下方的滚动条更近或更远.带有标题的div不会以任何方式相互移动.

到底发生了什么？我是否可能以错误的方式实现标题栏的“最小高度”效果？是否有更多跨浏览器友好的方法？

非常感谢！

编辑：

JSFiddle按照大众需求：http://jsfiddle.net/YJHrY/4/

最佳答案 正如我想的那样,你使用的是一个显示属性,其值为inline-block,默认情况下是与底部对齐的.

http://jsfiddle.net/YJHrY/5/

将vertical-align：top添加到.verticalChart .singleBar

.verticalChart .singleBar {
    /* FrontRow Edits */
    width: 4.4%;
    display: inline-block;
    margin:0 1% 0% 1%;
    float: none;
    vertical-align: top;
}
点赞