<legend>标记</legend>的HTML显示错误

Question

我有一些类似下面的代码：

<form>
    <fieldset>
        <legend>Form Title</legend>
        <legend>Text Box 1</legend>
            <input type="text"/>
        <legend>Text Box 2</legend>
            <input type="text"/>
        <legend>Text Box 3</legend>
            <input type="text"/>
        <input type="submit"/>
    </fieldset>
</form>

没关系上面的代码段是不完整的，它会作为我问题的一个例子。

当页面显示时，大约一半的时间加载为下面图像的左侧位置，而其余的时间则像正确的位一样按预期加载。

这是为什么？我知道<legend>在这里使用不当，我打算用<label>代码替换它们。我正在逐步取代我在大学里教过的所有错误，但旧习惯很难改变。这可能是个问题吗？

出现时页面的源代码彼此相同。

Answer 1

正如我的评论所述，请勿使用<legend>。这不是它的用途，它是错的，如果它正确呈现，那纯粹是偶然的。

请参阅this Fiddle以获得正确的实施。

HTML：

<form>
    <fieldset>
        <legend>Send Support Inquiry</legend>
        <label for="name">Name</label>
        <input type="text" name="name" id="name"/>
        <label for="email">Email</label>
        <input type="text" name="email" id="email"/>
        <label for="message">Message</label>
        <textarea rows="8" cols="30" name="message" id="message"></textarea>
        <input type="submit" value="Submit" />
    </fieldset>
</form>

CSS：

label, input, textarea
{
    float: left;    
    clear: both;
}