Мне нужно украсить стандартную кнопку HTML. Базовый элемент я взял <button> вместо <input>, потому что я решил, что элемент должен быть родительским контейнером. И там есть дочерний элемент <div>. Этот элемент <div> будет основным элементом оформления и должен занимать все пространство родительского элемента - кнопки.
<button>
<div>*decoration goes here*</div>
</button>
А в каскадных таблицах стилей это может выглядеть так:
CSS
body { background: *red*; }
button, div {
outline: 0; margin: 0; border: 0 none; padding: 0;
font-size: 0; line-height: 0;
display: block;
}
button {
width: *150*px;
height: *50*px;
background: *green*;
position: relative;
}
div {
width: 100%; height: 100%;
background: *black*;
position: absolute;
top: 0; left: 0;
}
HTML
<button type="button">
<div>*decoration goes here*</div>
</button>
Итак, Опера (10) делает хорошо ,
webkits Chrome (6) и Safari (4) это делает также хорошо ,
но
Internet Explorer (8) плохо - Инспектор DOM показывает странное смещение сверху и слева, FireFox (3) также bad - Инспектор DOM показывает, что <div> получает некоторое отрицательное значение в свойствах css right: и bottom:. Даже если это свойство будет установлено на ноль (0), DOM-Inspector по-прежнему будет отображать то же отрицательное значение.
Я почти сломал свой мозг. Помогите, пожалуйста, решить эту проблему!
Я пытался решить эту проблему разными способами, но все равно не получил правильных результатов. Internet Explorer показывает так:
Internet Explorer, показывающий это http://lh4.ggpht.com/_Mg2QP5yqWmc/S_J5HX2wRFI/AAAAAAAAAKk/_a_0VCJodHE/s800/iexplorer.jpg
и Firefox вот так:
Firefox вот так http://lh6.ggpht.com/_Mg2QP5yqWmc/S_J5HQluaxI/AAAAAAAAAKo/PcOsmci9NOk/s800/firefox.jpg.
Другие браузеры верны.