1
我不知道为什么这个元素的内部输入字段得到不同的渲染。这是一个截图(它应该在中间,就像在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像素是什么原因造成的?
必须有一个解决方案吗? – randomKek 2012-03-07 10:54:50
我们可以工作的例子,所以我们可以做一些技巧,很容易发现错误 – Jack 2012-03-07 11:12:05