我在 IE 和 chrome 上面临差异答案

【问题标题】：I face differences on IE and chrome我在 IE 和 chrome 上面临差异
【发布时间】：2012-04-11 14:15:55
【问题描述】：

我在 IE 和 Chrome 中遇到了一些布局差异。我已经在堆栈溢出高低方面搜索了解决方案并尝试了其中一些...我尝试将 box-sizing 设置为初始...它没有工作...之前尝试设置文本框的高度它确实有效但仍然很大的不同。我还尝试将文档类型更改为严格。作为项目的一部分，我遇到了这个问题。

问题：我在 div 标签中有表单。在表单中有 4 行文本字段。我把 IE 上的预览和 Chrome 上的预览并排对比，发现是文本区域的间距导致了高度的差异。

我的 html 文件中的代码：

  <div class="leftdetails">
    <form class="form2" name="form2" method="post" action="">
      <label for="fname">First Name: </label>
      <input type="text" name="fname" id="fname" class="regfields"/>
      <br />
      <label for="cdsid">CDSID: </label>
      <input type="text" name="cdsid" id="cdsid" class="regfields"/>
      <br />
      <label for="mail">Mail Drop: </label>
      <input type="text" name="mail" id="mail" class="regfields"/>
      <br />
     <label for="dateofbirth">D.O.B.: </label>
     <input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
     <br />
    </form>
  </div>

我的 CSS 上的代码（外部）

    .leftdetails
    {
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
    }

    .regfields
    {
width:200px;
height:20px;
vertical-align:bottom; 
    }

     .form2
    {
text-align:right;
margin-right:50px;
    }

这还没有在线发布，因此没有链接......但我很乐意提供截图。这是一个非常小的差异，但我只是想了解原因。

【问题讨论】：

您不能真正将图像“上传”到 SO。您可以使用图片主机（例如 imgur ）来托管图片，然后在您的帖子中使用 <img> 标签链接到它。
@PenguinCoder 我添加截图...谢谢
查看实际屏幕截图会很有帮助。您可能还想通过 Firebug 或类似工具跟踪文本字段的呈现样式。这可能只是浏览器之间默认边距/边框/填充不同的情况。
@holodoc 如果默认情况下是浏览器之间的边距/填充/边框，我能解决这个问题吗？
只是在黑暗中拍摄：您是否尝试在 regfields CSS 类中将 padding-top 和 padding-bottom 设置为 0px。也许还有margin-top 和margin-bottom。

标签： css forms internet-explorer google-chrome

【解决方案1】：

尝试在regfields CSS 类中将padding-top 和padding-bottom 设置为0px。也许还有margin-top和margin-bottom

【讨论】：

【解决方案2】：

尝试在您的 CSS 中使用条件 IE 语句以仅针对 Internet Explorer 浏览器。

如果你不知道怎么做，可以找到例子here

【讨论】：