Is there a way to make a div the same size on all browsers?

Question

On occasion it is required that a DIV is a specific size so to ensure that the layout lines up but often it seems impossible to fine the CSS to ensure that it sits correctly in all of the major browsers.

For example this simple JSFiddle shows a few tabs that select the div that is shown below the tabs. To make it look more like you are pulling the section to the surface using the tab it overlaps the section slightly with no lower border so it appears the tab and section are one and the same.

The issue is that the height of the tab must be exact or the illusion is destroyed. With this example the tabs are the correct size in the latest Firefox, Safari (last PC version) & Chrome but a pixel to short in Opera so it doesn't overwrite the top border of the text section (details div) and two pixels to small in IE 10 so there is actually a gap between the tabs and main section.

I know I could create a separate style sheet that only loads for IE and Opera etc but I would rather avoid it if possible as it will increase the work for maintaining the site.

HTML from JSFiddle:

<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>

CSS from JSFiddle

.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

Try setting a fixed line-height on your tabs. The default value for line-height is browser-specific, and it may cause a slight offset. A typical value would be 1.2.

In fact, you realised this yourself in your comment ;) It's the text that's to blame, and the above line-height should fix it.