带有< fieldset>的框阴影CSS。 Firefox和Chrome [英] Box shadow CSS with a <fieldset>. Firefox vs Chrome
问题描述
我在Firefox上的CSS有问题。在Chrome上完美呈现的栏位集：
I have a problem with CSS on Firefox. A fieldset that renders perfectly on Chrome:
在firefox中，它显示如下：
In firefox it shows like this:
我发现从CSS的顶部删除boxshadow在字段集边框上方，在Firefox上消失，但是我没有阴影。
I discovered that removing the boxshadow from the CSS the top section, above the fieldset border, disappears on Firefox, but then I don't have the shadow. How can put them both the same?
以下是代码：
<div id="wrapper" style="position: relative;">
<fieldset style="width: 17em;" class="loginField"><legend align="right">Log in</legend>
<table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Username:</div></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Password:</div></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif">
</td>
<td align="right" style="vertical-align: top;">
<button type="button" class="loginButton" style="height: 25px;">>> GO</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><div class="loginWarning" style="display: none; width: 100%;"></div></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
和CSS：
.loginButton {
background: -moz-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
border: 1px solid #093C75;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 #FFFFFF;
color: #FFFFFF;
cursor: pointer;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight: bold;
margin-right: -1em;
margin-top: 1em;
padding: 5px 10px;
text-decoration: none;
text-shadow: 0 1px 1px #333333;
text-transform: uppercase;
}
.loginButton:hover {
background: -moz-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
border-color: #093C75;
text-decoration: none;
}
.loginButton:active {
background: -moz-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
border-color: #093C75;
outline: medium none;;
}
.loginWarning {
padding-top: 0.2em;
font-family: 'Aldrich', sans-serif;
color:#FE2E2E;
font-size: 12px;
font-weight: 400;
}
.loginField {
padding-left: 2em;
padding-right: 2em;
padding-top: 1em;
border: 0;
background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px #AAAAAA;
margin: 60px auto 0;
padding: 20px;
}
.loginField legend {
text-align: right;
background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px #AAAAAA;
padding-right: 1em;
padding-left: 1em:
}
.loginField img {
max-width: 24px;
}
.loginVerticalPanel {
margin: 0 auto 0 auto;
}
.loginVerticalPanel input {
background: -webkit-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 3px #AAAAAA;
padding: 5px;
}
推荐答案
顺便说一句，抓住这个！
By the way, very nice catch on this! Definitely a future-help-type-of-question.
在快速运行中，我发现了一个非常不同的解决方案：
On the quick run I found a very alternative fix:
.loginField legend {
text-align: right;
background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 0 0 15px #AAAAAA;
-moz-box-shadow: 0 0 15px #AAAAAA;
box-shadow: 0 0 15px #AAAAAA;
padding-right: 1em;
padding-left: 1em;
position: absolute;
margin: -30px 0px 0px 200px;
}
现场示例：http://jsfiddle.net/xDE4x/1/
And the live example: http://jsfiddle.net/xDE4x/1/
我修复了一些您的CSS语法（：而不是; 等）。我还添加了 -moz - 和 -webkit - 版本的CSS3语法。
I fixed some of your CSS syntax (: instead of ; and etc). Also I added -moz- and -webkit- versions of the CSS3 syntax.
我会继续挖掘，但这是第一种方法..它的工作伟大，应该更多的浏览器兼容然后你的CSS3功能..但是，它取消了传说放置，你需要设置回来负边距。
I will keep digging, but this is the first method.. It works great and should be more browser compatible then your CSS3 features.. However, it unsets the legends placement and you need to set it back with negative margins.
这篇关于带有< fieldset>的框阴影CSS。 Firefox和Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
