बटन को एक लचीला आकार रखने के लिए, मैं किसी भी अंत में "कैप्स" और एक दोहराने वाली पृष्ठभूमि के साथ एक बटन बनाने की कोशिश कर रहा हूं।आईई 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 में काम नहीं करते हैं, और एक बनाया है काम-आसपास जो इस समस्या को प्रभावित नहीं कर रहा है।
क्या आप जानते थे [jsfiddle scss को भी समझता है] (http://jsfiddle.net/sg3s/Dqr76/)? (कृपया मेरा jsfiddle उदाहरण पूरा करें ताकि लोग कोड के साथ गड़बड़ कर सकें) – sg3s
इसे इंगित करने के लिए धन्यवाद! मैंने इसे कुछ डमी छवियों के साथ अपडेट किया और – allicarn
से ऊपर एक लिंक जोड़ा जो हमें अभी भी जेएसएफडी जेनरेट किए गए नए यूआरएल की आवश्यकता है: पी – sg3s