为什么将这个 html 放在表单标签中会改变布局？答案

【问题标题】：Why does placing this html within form tags change the layout?为什么将这个 html 放在表单标签中会改变布局？
【发布时间】：2010-05-28 19:51:23
【问题描述】：

我正在使用这个免费的 Web 模板 - EliteCircle，并且刚刚将它合并到一个母版页中。母版页将 html 包装在：

<form id="form1" runat="server">
 //master page html
</form>

除了整个页面被一个白色边框包围（表单的默认 CSS 行为？）和底部的页脚背景是半白色之外，模板几乎可以正常运行。

我不希望 id=form1 的表单会更改布局中的任何内容。 [CSS][2] 中没有具有该 ID 的任何内容。

当我从母版页中删除表单标签（只是为了检查）时，布局是完美的，没有问题。

有什么想法吗？

（使用 Visual Web Developer 2008 Express）

谢谢，格雷格

The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css

【问题讨论】：

标签： html css

【解决方案1】：

你见过吗

/* form elements */
form {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

在您的 CSS 文件中声明？这可能只是解释了厚厚的白色边框和你提到的其他东西:)

要么将该声明更改为 form.myForm（并更改所有需要它的表单），要么重新级联页面上的 form1 id 或内部标记以覆盖这些设置。

【讨论】：

【解决方案2】：

我同意 Konerak 的观点，但是提个建议，不要以通用的方式将属性设置为 html 元素，而是使用类...

你的 CSS：

/* form elements */
form {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

建议：

form.standard {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

如果您将 css 设置为 form 元素，您页面中的所有表单都会收到 do 属性，但是如果您将 do 属性设置为一个类，那么只有具有该类的表单才会收到... 顺便说一句：DocType 也可能会干扰所需的结果...

【讨论】：