Question

在Chrome中，请注意“您的联系信息”下的input区域与div#contact的边框对齐。另请注意，“消息”下的文本区域与该边界不对齐;它移动了几个像素。这不是我喜欢的行为。 Chrome screencap

在Firefox中，左边的所有内容都排成一行。这有点困难，但你可以在这个屏幕上看到它。这是我喜欢的行为。 Firefox screencap

我的问题很明显：如何让这些输入区域在左侧排列（如在Firefox图像中）？

以下是为页面的该部分（位于页面页脚中）呈现的HTML（非工作框架form代码）。

<div id="footer">   
  <div id="contact"> 
    <h1>Talk to me</h1> 
      <div id="email-me">You can email me at <a href="mailto:address@server.com">address@server.com</a><br/> 
      or fill out the form below!
    </div> 
    <form> 
      <div id="email"> 
        <h2>Your contact info</h2> 
        <input type="text"/><br/> 
      </div> 
      <div id="message"> 
        <h2>Message</h2> 
        <textarea rows="10" cols="75"></textarea><br/> 
      </div> 
      <input class="buttons" type="submit" value="Send"/> 
    </form> 
  </div> 
</div>

这是CSS。这是很长的，所以我要编辑一些部分，但我决定反对它，以防一些小块产生差异。

#footer {
    clear:both;
    background-color:#8BA5B5;
    min-height:400px;
    font-size:13px;
    font-family:Helvetica,Verdana,Arial,sans-serif;
    color:#fff;
    padding-left:105px;
    padding-top:30px;
    padding-bottom:45px;
    position:relative;
    top:5px;
    overflow:hidden;
}

  #footer h1 {
    font-size:15px;
    margin:0px;
    margin-bottom:5px;
  }

  #footer a {
    color:#DAEBF5;
    text-decoration:none;
    margin-bottom:5px;
  }

    #footer a:visited {
        color:#333;
        text-decoration:none;
    }

    #footer a:hover {
      text-decoration:underline;
    }

  #email-me {
    font-size:16px;
    padding-left:2px;
    margin-bottom:10px;
    text-align:center;
  }

    #email-me a {
      font-size:18px;
      font-style:normal;
    }

  #contact {
    float:left;
    overflow:hidden;
    font-style:oblique;
    font-family:georgia,times,serif;
  }

    #contact h1 {
      font-size:44px;
      font-style:normal;
      text-align:center;
      font-family:helvetica,verdana,arial,sans-serif;
    }

    #contact h2 {
      margin:0px;
      font:inherit;
    }

    #contact input {
        background-color:transparent;
        border:1px solid #fff;
        color:#fff;
        width:50%;
    }

    #contact textarea {
        background-color:transparent;
        border:1px solid #fff;
        color:#fff;
    }

    #contact #message {
      margin-top:5px;
        margin-bottom:5px;
    }

    #contact .buttons {
      font-family:inherit;
      font-weight:800;
      font-size:12px;
      padding:5px;
      width:100%;
      background-color:#fff;
      color:#8BA5B5;
    }

Answer 1

 #contact input, #contact textarea { 
    margin:0px;
}

Answer 2

它的边距是关闭的......你是否使用CSS重置来平衡所有浏览器的样式？

尝试将 margin：0; 设置为您的输入

对于css重置，我建议：

http://meyerweb.com/eric/tools/css/reset/

Chrome与Firefox的Box问题

2 个答案: