Relative numerische Angaben

[rekire]

Hi,

Ich habe jetzt eine mehr oder weniger elegante Lösung gefunden:

<style>
button {
 font-size:12px;
 height:2em;
 width:2em;
}
.strich {
 margin:0;
 padding:0;
 background-color:#000;
 height:.08em;
 width:.8em;
 overflow:hidden;
 margin-top:.08em;
}
</style>

<button><b>F</b></button>
<button><u>U</u></button>
<button>
<div class="strich" style="margin-top:4px;"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
</button>

Das Problem dabei ist allerdings das die Buttons in FF, Opera und IE anders aussehen. Die Buttons sind unterschiedlich nicht alle auf einer Höhe und haben zum Teil einen merkwürdigen Abstand zu den anderen Elementen wie kann ich das verhindern?

Gruß,
Rekire