Question

有时需要DIV是一个特定的大小，以确保布局排队，但通常似乎不可能使CSS更好，以确保它在所有主流浏览器中正确放置。

例如，这个简单的JSFiddle显示了一些选项卡，用于选择选项卡下方显示的div。为了使它看起来更像是你使用标签将部分拉到表面，它略微重叠部分而没有下边框，所以看起来标签和部分是同一个。

问题是标签的高度必须精确或幻象被破坏。在这个例子中，标签在最新的Firefox，Safari（最后一个PC版本）和最新版本中是正确的大小。 Chrome中的一个像素缩短，因此它不会覆盖文本部分的顶部边框（细节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应该修复它。

有没有办法在所有浏览器上制作相同大小的div？

HTML：

CSS

1 个答案: