有没有一种跨浏览器的方法来阻止 HTML 表单元素重叠它们的容器？答案

【问题标题】：Is there a cross-browser way to stop HTML form elements from overlapping their containers?有没有一种跨浏览器的方法来阻止 HTML 表单元素重叠它们的容器？
【发布时间】：2010-08-27 00:38:40
【问题描述】：

大约一年前，有人在 stackoverflow 上问了一个关于如何水平对齐 input 和 textarea 元素的问题：input width vs textarea width

我有一些 HTML + CSS，我正试图准确地做到这一点，但我发现无论我使用什么 CSS 重置和精确的、基于像素的宽度定义的组合，我都无法在我的页面在右侧对齐（自动发生左对齐）。这是一些简单的演示代码。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      * {margin: 0; padding: 0;} /* primitive reset */
      body {width: 200px; margin-left:auto; margin-right: auto;
            border: 1px solid black;}
      input {border: 1px solid black; width: 200px;}
      div {border: 1px solid black;}
      textarea {border: 1px solid black; width: 200px;
      }
    </style>
  </head>
  <body>
    <input type="text" value="textinput">
    <div>div</div>
    <textarea>textarea</textarea>
  </body>
</html>

如果我更改 input 和 textarea 的宽度，我可以让它们在 chrome 中对齐。但是他们不会在 Firefox 中排队。反之亦然。默认情况下，即使重置 css，一个元素或另一个元素也会与右侧的包含 div 重叠。如果需要，您可以删除我设置的边框并使用浏览器各自的 DOM 检查器。

我花了太多时间来解决这个问题，所以我想知道这里是否有人知道我正在尝试做的事情是否可行。

【问题讨论】：

太令人沮丧了！当元素位于 div 内并且它们与容器的右侧重叠时，这尤其糟糕。

标签： html css

【解决方案1】：

这确实令人沮丧。您最好的选择是从输入元素中删除边框并将它们包装在另一个带有边框的固定宽度元素中，例如<div>。

<!DOCTYPE html>
<html>
  <head>
    <title>SO question 3577146</title>
    <style>
      * { margin: 0; padding: 0; } /* primitive reset */
      body { width: 200px; margin: 0 auto; border: 1px solid black; }
      div { width: 200px; border: 1px solid black; }
      input { width: 198px; border: 0; }
      textarea { width: 198px; border: 0; }
    </style>
  </head>
  <body>
    <div><input type="text" value="textinput"/></div>
    <div>div</div>
    <div><textarea>textarea</textarea></div>
  </body>
</html>

Here's a jsfiddle demo.

【讨论】：

这似乎确实有效，至少在 Webkit 和 FF 中是这样。必须将额外的 div 扔在那里非常烦人......对我来说，它破坏了真正语义标记的意义。但我没有看到任何其他方式来做到这一点。简而言之：谢谢。
通常，div（和 span）没有语义值。至少，在 SEO 方面。一些纯粹主义者可能不同意这一点，但这些纯粹主义者通常是 HTML 开发人员，他们强烈倾向于查看他们访问的每个网页的 HTML 源代码。