盒陰影CSS與<fieldset>。火狐VS鉻

Question

我有在Firefox的CSS問題。完美地呈現在Chrome一個字段：

在Firefox中這樣表示：

我發現，除去CSS中boxshadow頂部，字段集邊框上方，上消失Firefox，但是我沒有影子。怎麼能把它們都放在一起？

下面是代碼：

<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;">&gt;&gt;&nbsp;&nbsp;&nbsp;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; 
} 

Answer 1

順便說一句，非常好的抓這個！絕對是一個未來的幫助類型的問題。

在快速運行，我發現一個很另類的解決辦法：

.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/

我修正了一些你的CSS語法（:而不是;和等）。此外，我加入-moz-和-webkit-版本的CSS3語法。

我會繼續挖掘，但這是第一種方法..它工作的很好，應該更多的瀏覽器兼容，然後你的CSS3功能..但是，它取消了傳說的位置，你需要設置它與負邊緣回來。

Answer 2

或者，你可以「浮動」的傳說中，也並不需要太多的工作，以維護你的佈局特別是當你有一個以上的字段集。在提問的情況下這將是：

.loginField legend { 
    float: right; 
    margin-top: -30px; 
    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; 
} 

Answer 3

我所做的是設置在距頂部爲傳說爲負值，這樣看來，它具有零高度字段集;然後，我在相反的方向上應用了一個負邊距來抵消第一個負邊距。然後，我添加了相同值的填充字段，以使它們像平常一樣定位。

fieldset 
{ 
    padding-top: 14px; 
} 

fieldset legend 
{  
    margin-top: -14px; 
    margin-bottom: -14px; 
}