【发布时间】：2014-05-13 22:22:57
【问题描述】：
有时需要 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;
}
【问题讨论】：
-
哦，我确实发现它似乎是导致更改的文本。如果我删除文本并调整填充以补偿它似乎在所有浏览器中都可以正常工作，例如jsfiddle.net/5P53V/1
标签： html css internet-explorer firefox