html - 有没有办法使所有浏览器上的 div 大小相同？

Question

有时需要 DIV 的特定大小以确保布局对齐，但通常似乎不可能调整 CSS 以确保它在所有主要浏览器中都能正确显示。

例如这个简单的JSFiddle显示了几个选项卡，这些选项卡选择了显示在选项卡下方的 div。为了使它看起来更像是您正在使用选项卡将部分拉到表面，它与部分略微重叠且没有下边框，因此看起来选项卡和部分是同一部分。

问题是选项卡的高度必须准确，否则幻觉就会被破坏。在这个例子中，标签在最新的 Firefox、Safari(最新的 PC 版本)和 Chrome 中是正确的大小，但在 Opera 中短了一个像素，因此它不会覆盖文本部分(详细信息 div)的顶部边框和两个像素在 IE 10 中很小，因此选项卡和主要部分之间实际上存在间隙。

我知道我可以创建一个单独的样式表，只为 IE 和 Opera 等加载，但我宁愿尽可能避免它，因为它会增加维护网站的工作量。

来自 JSFiddle 的 HTML:

<div class="product-details-page">
    <div class="details-tabs">
        <div class="tabs">
            <div class="description selected">Description</div>
            <div class="deliveryOptions">Delivery Options</div>
        </div>
        <div class="details">
            <div class="description show">A big description of a product. Might go over several lines and will be very "descriptive".</div>
            <div class="deliveryOptions">We just chuck it in Santa's bag when he isn't looking.. <br>Delivery is only once a year but it's FREE! ;)</div>
        </div>
    </div>
</div>

来自 JSFiddle 的 CSS

.product-details-page .details-tabs {
    margin-top: 15px;
}
.product-details-page .details {
    border: 1px solid #808080;
    padding: 5px;
}
.product-details-page .details-tabs .tabs > div {
    border: 1px solid grey;
    border-bottom: none;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.product-details-page .details-tabs .tabs > div:hover {
    background-color: #FF0000;
    color: #FFFFFF;
}
.product-details-page .details > div {
    display: none;
}
.product-details-page .details > div.show {
    display: block;
}
.product-details-page .details-tabs .tabs {
    height: 26px;
}
.product-details-page .details-tabs .tabs .selected {
    background-color: #FFFFFF;
    color: #000000;
    -webkit-text-shadow: 0 0 7px #FF0000;
    text-shadow: 0 0 7px #FF0000;
}
body {
    font-family:"arial,?helvetica,?sans-serif";
    font-size: 12px;
}

Answer 1

尝试在选项卡上设置固定的 line-height。 line-height 的默认值是特定于浏览器的，它可能会导致轻微的偏移。典型值为 1.2。

事实上，您自己在评论中意识到了这一点 ;) 问题出在文本上，上面的 line-height 应该可以解决这个问题。