Question

出于测试目的，我有一个基本表格，其中三个输入在同一行上对齐：

“名称”（类型=文字），“密码”（类型=文字）和“提交”（type = submit） **。

像这样：

<body>
<form>
<input type="submit" class="search" value="log in"/> 
<input type="text" value="username"/>
<input type="text" value="username"/>
</form>
</body>

如果我在IE8中进行测试切换兼容性视图按钮，我的表单向下移动，我注意到即使我应用这样的重置css，填充也会改变：

<style>
html, body, span,a, applet, object, iframe, h1, h2, h3, h4, h5,div, h6, p, blockquote, pre, 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,input, td {border: 0 none;margin: 0;padding: 0;

在切换兼容性视图按钮的同时，有人可以如何实现将表单稳定在同一位置，所有这三个输入对齐，填充也相同？

感谢

卢卡

Answer 1

我远不是CSS和网页设计的专家，但我目前正在努力在主要使用Chrome和IE 8进行开发和测试后，在IE 7中更新Web应用程序。

我一直在IE 8中使用兼容模式来测试IE 7中的页面布局;对于安装了IE 7的虚拟机进行粗略测试，兼容模式会像IE 7一样呈现页面，并且报告自己是IE 7。

据我所知，问题是IE 7只是让输入按钮比IE 8更高。请参阅此处没有css的示例：http://jsfiddle.net/zHpX8/4/

如果添加样式以显式设置输入高度，则它似乎在常规模式和兼容模式下呈现相同：http://jsfiddle.net/zHpX8/6/

不是一个理想的答案，我希望有更多知识的人会提供更好的答案，因为我也可以使用它。目前，对于像这样的小事情，如果它不是太糟糕的话，我只是忍受它，但对于我找不到共同点的少数情况，我有一个专门针对IE 7的样式表，以及一个针对所有其他的样式表浏览器。

我希望IE 7能够消失......

Answer 2

在html页面上设置doctype，如下所示：

<!DOCTYPE html>

作为html文档中的第一行

Answer 3

找到自己给出高度的答案并将输入类型定位=提交为绝对值这是一个解决方案

IE8输入css样式并对齐

3 个答案: