Question

如果在3个差异中看到，表单中文本字段的垂直位置有3 px差异怎么可能。浏览器？

我疯了。尝试在CSS中修复它并不好，因为如果我改变它，它在一个很好，但在其他的没有。

#pricefromR 

{width:75px;
position:relative;
right:40px;
top: 50px;
}

#pricetoR 

{width:75px;
position:relative;
right:-45px;
top: 24px;
}

所以这对应于两个texles，它们应该是并列的，彼此在同一个级别，但是它们不在不同的浏览器中，相差3 px并且它们与其他每个都相同在LI

<li>
        <input type ="text" id = "areafromR" placeholder="area from" name = "areafrom" maxlength = "5">&nbsp;
        <input type ="text" id = "areatoR" placeholder="area to" name = "areato" maxlength = "5">
    </li>

Answer 1

所有浏览器都不同，它们有不同的默认值，不同的wu =宽度/高度。我所知道的最好的方法是使用百分比，但这可能会变得复杂。您可以为不同的浏览器分配CSS。例如......这适用于Internet Explorer

Answer 2

您应该尝试reset your CSS

如果您不知道，每个浏览器都有自己的默认用户代理'样式表，用于使无格式网站显得更多清晰可辨。例如，大多数浏览器默认情况下将链接设为蓝色和访问链接紫色，给表格一定数量的边框和填充，将可变字体大小应用于H1，H2，H3等等几乎所有东西的填充量。曾经想知道为什么提交每个浏览器的按钮看起来都不同它限制了差异浏览器之间

使用CSS重置，您可以强制每个浏览器将其所有样式重置为null，从而减少跨浏览器的差异

使用此代码：

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

通常的做法是将其放在另一个CSS文件中。

差异浏览器中的css位置相同

2 个答案: