表单中的图例在Safari中正常工作，但在Mozilla中无法正常工作

在Safari浏览器中，我的表单中的图例实际上不适合Mozilla浏览器，请如何修复它，下面是标记语言，以及相关的CSS也below.and我也有附接在图像作为well.thanks表单中的图例在Safari中正常工作，但在Mozilla中无法正常工作

<div> 
<form action='relogin.php' method='post' class='rl'> 
<fieldset> 
<legend>Login</legend> 
    <div> 
    <label for='username' class='fixedwidth'>Username</label> 
    <input type='text' name='username' id='username'/> 
    </div> 

    <div> 
    <label for='password' class='fixedwidth'>Password</label> 
    <input type='password' name='password' id='password'/> 
    </div> 
<div class='buttonarea'> 
    <input type='submit' value='Log in'/> 
    </div> 
<p> 
<a href='reregister.php'>Register </a> 
</p> 
</fieldset> 
</form> 
</div>

CSS

form.rl,form.slistbar{ 
    padding:0; 
    margin:0; 
    margin-top:-15px; 
    line-height:150%; 

} 

form.rl,form.slistbar label { 
    font-weight:bold; 
    font-size: small; 
} 

form.rl,form.slistbar label.fixedwidth{ 
    display:block; 
    width: 240px; 

} 

form.rl,form.slistbar .buttonarea input{ 
colour: white; 
font-weight; bold; 
padding: 5px; 
border: 1px solid white; 
} 

form.rl,form.slistbar fieldset{ 
border:2px solid navy; 
padding:10px; 
width: 150px; 
margin-top:30px; 
} 

form.rl,form.slistbar legend{ 
font-weight:bold; 
font-size: small; 
colour: navy; 
}

狩猎 safari image

mozilla

来源

2012-03-09 lostty84

您是否尝试过设置文本字段的宽度？ – 2012-03-09 11:52:16

@SaladinAkara你的意思是像form.rl，form.slistbar label.fixedwidth { \t display：block; \t width：240px; – lostty84 2012-03-09 11:56:17

grouping operator ,不能这样工作。逗号,将分开几个selectors，它们中的每一个必须是有效的并且完全定义。（Demo）

所以不是

form.rl,form.slistbar label { 
    /* ... */ 
}

你真正想要

form.rl label, form.slistbar label { 
    /* ... */ 
}

，因为要影响form.r1 label和form.slistbar label，不form.r1和form.slistbar label。另请注意，它是color:而不是colour，因为W3C正在创建美国英语中的标准/建议。

来源

2012-03-09 12:01:52 Zeta

如果语言同时使用美国和英国英语，那将是非常好的：P – Geekfish 2012-03-09 12:07:40

@Geekfish：英语不是我的第一语言，我在学校学习英国英语的同时，我开始使用CSS，所以没关系。每当我问自己“颜色”或“颜色”时，我只是认为“选择较短的一个，程序员很懒”，我倾向于说得对：D。（OT：如果主要的编程语言是用某种深奥的语言编写的，或者镜像语言：'ftnirp（“！dlroW olleH”）;'） – Zeta 2012-03-09 12:16:54

.slistbar你的标记在哪里？包含在.slistbar?

元素我不是100％地肯定为什么它在Safari，但form.rl, form.slistbar fieldset不都form.rl和form.slistbar样式应用到fieldset，它适用于form.rl（如表单元素本身）和fieldset元素在form.slistbar内。

你可能想这样做：

form.rl fieldset, form.slistbar fieldset { ... 并为您的样式，其余类似。

来源

2012-03-09 12:06:12 Geekfish

.slistbar是另一个页面上的另一种形式 – lostty84 2012-03-09 12:13:41

那么问题是你的选择器，就像下面@ Zeta的回答一样，你使用逗号的方式你的样式不适用于'form.rl'中的元素，而是'form.rl'本身。 – Geekfish 2012-03-09 12:16:46

好的，谢谢zeta和geekfish – lostty84 2012-03-09 12:18:12

表单中的图例在Safari中正常工作，但在Mozilla中无法正常工作

回答

相关问题