html錯誤的位置

我不知道爲什麼這個元素的內部輸入字段得到不同的渲染。這是一個截圖（它應該在中間，就像在Firefox上）。html錯誤的位置

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

的元素存在出3周的div。

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

我希望有些人知道爲什麼它是呈現不同。

問題不在於字體權重，Firefox和Chrome中的差異是2像素是什麼原因造成的？

來源

2012-03-07 randomKek

必須有一個解決方案嗎？ – randomKek 2012-03-07 10:54:50

我們可以工作的例子，所以我們可以做一些技巧，很容易發現錯誤 – Jack 2012-03-07 11:12:05

在Firefox中添加了padding-top和padding-bottom，刪除了它並使其工作完美。

來源

2012-03-09 12:54:29 randomKek

html錯誤的位置

回答

相關問題