css - Chrome 与 Firefox 中的框问题

Question

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

在 Firefox 中，所有内容都在左侧排列。这有点困难，但您可以在这个屏幕截图中看到。这是我喜欢的行为。

我的问题很明显:如何让这些输入区域在左侧对齐(如 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

看起来您的边距不对...您是否正在使用 CSS 重置来平衡所有浏览器的样式？

尝试将 ma​​rgin:0; 设置为您的输入

对于 css 重置，我建议:

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