Question

我在IE和Chrome中面临一些布局差异。我已经搜索了堆栈溢出高和低的解决方案并尝试了一些...我尝试将box-sizing设置为初始...它不起作用...那么尝试设置文本框的高度它确实有效但仍然差异很大。我也尝试将doctype更改为strict。我在项目中遇到了这个问题。

问题：我有一个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;
    }

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

Answer 1

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

Answer 2

尝试在CSS中使用条件IE语句仅定位Internet Explorer浏览器。

如果您不知道如何操作，可以找到示例here

我在IE和Chrome上面临着差异

2 个答案: