सफारी में चेक-इन होने पर चेकबॉक्स क्यों स्थानांतरित होते हैं?

Question

मेरे पास page पर प्री-चेक किए गए चेकबॉक्स के साथ मूल्यों की एक श्रृंखला है। सफारी को छोड़कर, सभी ब्राउज़रों में देखो और काम ठीक है। जब मैं किसी भी चेकबॉक्स पर क्लिक करता हूं तो वे 'कूद' या 'ड्रॉप' डाउन करते हैं और फिर स्थिति में वापस जाते हैं।

मैंने कुछ शोध किया, लेकिन मुझे बॉक्स को आगे बढ़ने के तरीके के बारे में कुछ भी नहीं मिला।

input[type="checkbox"] { 
    width: 25px; 
    height: 25px; 
    -webkit-transform: scale(1.3,1.3); 
    display: inline-block; 
    margin-right: 5px; 
    border: 1px solid #0070BB; 
    } 

मैं चेक बॉक्स कैसे शैली है तो वे स्थिर होते हैं और जब क्लिक केवल राज्य बदलने के लिए:

<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p> 

यहाँ सीएसएस है:

यहाँ चेकबॉक्स के लिए कोड है?

Answer 1

मुद्दा width और height गुण है:

यहाँ एक आम तरीका है। वास्तव में कोई मायने नहीं रखता है, और मुझे इस मुद्दे पर कोई जानकारी नहीं मिल रही है। ऐसा लगता है कि चौड़ाई और ऊंचाई विशेषताएँ बॉक्स की डिफ़ॉल्ट स्थिति के लिए काम करती हैं, लेकिन आरंभिक और वैकल्पिक स्थिति के बीच संक्रमण को प्रस्तुत करते समय बाहर फेंक दिया जाता है।

सबसे अच्छा समाधान की संभावना होगी:

input[type="checkbox"] { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 

    display: inline-block; 
    margin-right: 5px; 
    border: 1px solid #0070BB; 
} 

तुम भी IE के पुराने संस्करणों (आप उन्हें समर्थन करते हैं) को लक्षित और फिर स्पष्ट ऊंचाई और चौड़ाई को जोड़ने के लिए एक सशर्त टिप्पणी उपयोग कर सकते हैं शैली पाने के लिए आप '

<!--[if lt IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

Answer 2

ऐसा इसलिए है क्योंकि आपने चेक बॉक्स के लिए कस्टम चौड़ाई और ऊंचाई निर्धारित की है। यदि आप अपने सीएसएस से चौड़ाई और ऊंचाई नियमों को हटाते हैं, तो चेकबॉक्स आपको चेक करते समय आगे बढ़ना बंद कर देते हैं।

समझना कि आप उन्हें बड़ा होना चाहते हैं, चेक बॉक्स को अनुकूलित करने के अन्य तरीकों को देखें। http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 3

http://jsfiddle.net/51chuew0/

input[type="checkbox"] { 
 
width: 25px; 
 
    height: 25px; 
 
    -webkit-transform: scale(1.3);  
 
\t -moz-transform: scale(1.3); 
 
\t -o-transform: scale(1.3); 
 
\t -ms-transform: scale(1.3); 
 
\t transform: scale(1.3); 
 
    display: inline-block;  
 
    margin-right: 5px; 
 
    border: 1px solid #0070BB; 
 
    } 
 
.matrix { 
 
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */ 
 
}

<p> 
 
<div class="matrix"></div>  
 
<input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p>

: तलाश है 0

Answer 4

सरल लेकिन काम कर समाधान है:

input[type="checkbox"] { 
height: auto; 
width: auto; 

}

अपने सीएसएस में

।