2012-03-07 3 views
1

Я понятия не имею, почему это внутреннее поле ввода элементов получает различный рендеринг. Это скриншот (он должен быть посередине, как на firefox).html неправильное положение

http://imageshack.us/photo/my-images/842/lasw.png/

Элемента существует из 3 див.

1. Container div (position relative) 
2. Input field (position absolute; top: 3px; left 0px;) 
3. Label (position absolute; top: 3px; left 0px;) 

Вот глобальные стили (возвратные и определяющие стиль шрифта)

label, input, textarea, select, button{ 
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: 20px; 
} 

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, 
del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, 
b, i, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, figure, footer, header, hgroup, menu, nav, section, menu, 
time, mark, audio, video{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    outline: 0px; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

Вот стиль на контейнере DIV:

.textbox{ 
    position: relative; 
    padding: 3px; 
    border-image: initial; 
    background: #FFFFFF; 
    -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2); 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    border: 1px solid #B3B3B3; 
    font-size: 13px; 
    line-height: 20px; 
} 

Здесь стиль на поле ввода , заполнитель:

.textboxInput, .textboxLabel{ 
    position: absolute; 
    top: 3px; 
    left: 0px; 
} 

Вот стиль на поле ввода:

.textboxInput{ 
    background: none transparent !important; 
    -webkit-appearance: none !important; 
    border: 0px !important; 
    outline: 0px !important; 
} 

Здесь стиль этикетки:

.textboxLabel{ 
    font-weight: 500; 
} 

Я надеюсь, что кто-нибудь знает, почему она оказывается по-другому.

Проблема не в весе шрифта, разница в 2 пикселя в Firefox и Chrome, что вызывает это?

+0

Должно быть решение правильно? – randomKek

+0

Можем ли мы работать над примером, чтобы мы могли сделать некоторые трюки, которые могли бы легко найти ошибки – Jack

ответ

0

padding-top и padding-bottom добавлен в firefox, удален, и он работает идеально.

Смежные вопросы