html - 从图例元素中删除左填充

Question

我希望包含内容的字段集和 div 在视觉上是相等的。我使用 YUI 3.4.1 重置 CSS 并且我有以下标记:

<fieldset>
    <legend>Hello world!</legend>
    <div>Lorem ipsum</div>                
</fieldset>
<div>
    <h3>Hello world!</h3>
    <div>Lorem ipsum</div>                
</div>

在 IE7 中，图例元素略微缩进。我尝试删除填充、边距和文本缩进。

fieldset,div{ 
    background-color: red;
    width: 200px;
    padding: 0;
    text-indent: 0;
    margin: 0;
}
legend,h3{ 
    background-color: yellow; 
    width: 200px; 
    display: block;
    padding: 0;
    text-indent: 0;
    margin: 0;
}

是否还有其他我遗漏的属性可以帮助解决问题？

http://jsfiddle.net/DBhQb/

Answer 1

关于 HTML5 boilerplate 的 CSS 文件legend 是这样设计的

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

*margin-left: -7px; 应该可以解决问题，因为它是 IE<8

的 css hack