10

बटन को एक लचीला आकार रखने के लिए, मैं किसी भी अंत में "कैप्स" और एक दोहराने वाली पृष्ठभूमि के साथ एक बटन बनाने की कोशिश कर रहा हूं।आईई 8 और आईई 9: पहले और: तत्वों की स्थिति पूर्ण होने के बाद

ऐसा करने में, मैं सीएसएस में :before और :after छद्म तत्वों, position:absolute के साथ इस्तेमाल किया है मुख्य बटन की पृष्ठभूमि से ढके अंतरिक्ष के बाहर इसे पाने के लिए (ऋणात्मक मानों का उपयोग)।

यह एफएफ और क्रोम में काम करता है, लेकिन यह आईई 8 और 9 में दिखता है, छवियां वहां हैं, लेकिन बटन के बाहर "बाहर" हैं, और इसलिए छिपी हुई हैं। क्या किसी को पता है कि बटन के इन छद्म तत्वों को "आउट" कैसे पॉप करना है, ताकि वे प्रस्तुत करेंगे?

मैं HTML को पर<button></button> तत्व रखना चाहता हूं, और SASS का उपयोग कर रहा हूं। http://jsfiddle.net/Dqr76/8/ या नीचे दिए गए कोड: आप एक jsFiddle यहाँ देख सकते हैं

button { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    border:0; 
    background-image: url(../images/btn_bg.png); 
    background-repeat: repeat-x; 
    color: #fff; 
    font-weight: bold; 
    height: 22px; 
    line-height: 22px; 
    position: relative; 
    margin: 0 5px; 
    vertical-align: top; 

    &:before { 
     display: inline-block; 
     height: 22px; 
     background-image: url(../images/btn_left.png); 
     width: 5px; 
     position: absolute; 
     left: -5px; 
     top: 0; 
     content: ""; 
    } 

    &:after { 
     display: inline-block; 
     height: 22px; 
     background-image: url(../images/btn_right.png); 
     width: 5px; 
     position: absolute; 
     right: -5px; 
     top: 0; 
     content: ""; 
    } 
} 

बस एक sidenote, इससे पहले कि किसी को यह लाता है, मुझे पता है कि इन छद्म तत्वों < IE8 में काम नहीं करते हैं, और एक बनाया है काम-आसपास जो इस समस्या को प्रभावित नहीं कर रहा है।

+0

क्या आप जानते थे [jsfiddle scss को भी समझता है] (http://jsfiddle.net/sg3s/Dqr76/)? (कृपया मेरा jsfiddle उदाहरण पूरा करें ताकि लोग कोड के साथ गड़बड़ कर सकें) – sg3s

+0

इसे इंगित करने के लिए धन्यवाद! मैंने इसे कुछ डमी छवियों के साथ अपडेट किया और – allicarn

+0

से ऊपर एक लिंक जोड़ा जो हमें अभी भी जेएसएफडी जेनरेट किए गए नए यूआरएल की आवश्यकता है: पी – sg3s

उत्तर

15

बटन तत्व में overflow: visible; जोड़ें, और यह दिखाता है। इस jsFiddle

पर दिखाया गया है कि मैं कसम खाता हूं कि मैंने पहले से ही कोशिश की है, लेकिन मुझे नहीं लगता है। Thanks to this question

+3

एक मालिक की तरह, अपने स्वयं के प्रश्न हल। :) +1 – sg3s