<fieldset> के साथ बॉक्स छाया सीएसएस। फ़ायरफ़ॉक्स बनाम क्रोम

Question

मुझे फ़ायरफ़ॉक्स पर सीएसएस के साथ समस्या है। एक fieldset कि क्रोम पर पूरी तरह से प्रस्तुत करता है:

फ़ायरफ़ॉक्स में यह इस तरह पता चलता है:

मुझे पता चला कि सीएसएस से boxshadow को हटाने के शीर्ष अनुभाग, fieldset सीमा से ऊपर है, पर गायब हो जाता है फ़ायरफ़ॉक्स, लेकिन तब मेरे पास छाया नहीं है। उन्हें दोनों एक ही कैसे रख सकते हैं?

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

और सीएसएस: इस पर

.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 सिंटेक्स के कुछ निश्चित (: बजाय ; और आदि)

त्वरित रन पर मैं एक बहुत ही विकल्प ठीक पाया। इसके अलावा मैंने CSS3 वाक्यविन्यास के -moz- और -webkit- संस्करण जोड़े।

मैं खुदाई रखेंगे, लेकिन यह पहली विधि है .. यह बहुत अच्छा काम करता है और अधिक ब्राउज़र संगत फिर अपने CSS3 सुविधाओं .. हालांकि, यह किंवदंतियों नियुक्ति unsets होना चाहिए और आप इसे वापस सेट करने के लिए नकारात्मक मार्जिन के साथ की जरूरत है।

Answer 2

वैकल्पिक रूप से आप पौराणिक कथाओं को "फ्लोट" भी कर सकते हैं, इसके लिए आपके लेआउट को बनाए रखने के लिए अधिक काम की आवश्यकता नहीं है, खासकर जब आपके पास एक से अधिक फ़ील्डसेट हों। questioners मामले में यह होगा:

.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 के लिए एक शून्य ऊंचाई है कि कथा के लिए एक नकारात्मक मूल्य को मार्जिन शीर्ष स्थापित करने के लिए है, इसके बाद मैंने पहले नकारात्मक मार्जिन को ऑफ़सेट करने के लिए विपरीत दिशा में एक नकारात्मक मार्जिन लगाया। फिर मैंने फ़ील्डसेट के बराबर मूल्य के पैडिंग को सामान्य रूप से स्थिति में लाने के लिए जोड़ा।

fieldset 
{ 
    padding-top: 14px; 
} 

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