सीएसएस: आईई के लिए रूपरेखा ऑफसेट विकल्प?

Question

मैं विभिन्न रंगों की 2 सीमाओं और सीमाओं के बीच की जगह के लिए निम्नलिखित कोड का उपयोग कर रहा हूं। मैं सीमाओं के बीच की जगह के लिए outline-offset संपत्ति का उपयोग कर रहा हूं। हालांकि यह आईई में समर्थित नहीं है (आईई 9 भी नहीं)। क्या कोई वैकल्पिक समाधान है जो आईई में भी काम करता है, एचटीएमएल में एक और div जोड़ने के बिना।

HTML:

<div class="box"></div> 

सीएसएस:

.box{ 
    width: 100px; 
    height: 100px; 
    margin: 100px; 
    border: 2px solid green; 
    outline:2px solid red; 
    outline-offset: 2px;  
} 

ऊंचाई और चौड़ाई तय नहीं है, मैं सिर्फ उदाहरण के लिए इस्तेमाल किया है।

JSFiddle: http://jsfiddle.net/xyXKa/

Answer 1

यहाँ दो समाधान कर रहे हैं। पहला आईई 8 + संगत है, pseudoelements का उपयोग कर रहा है। इसे JSFiddle here पर देखें।

HTML:

<div class="box"></div> 

सीएसएस:

.box { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 100px; 
    border: 2px solid green; 
} 
.box:after { 
    content: ""; 
    position: absolute; 
    top: -6px; 
    left: -6px; 
    display: block; 
    width: 108px; 
    height: 108px; 
    border: 2px solid red; 
} 

दूसरा विचार मेरे पास है एक गैर अर्थ समाधान है, लेकिन आप IE6 + समर्थन देता है। इसे JSFiddle here पर देखें।

HTML:

<div class="outer-box"><div class="inner-box"></div></div> 

सीएसएस:

.outer-box { 
    width: 104px; 
    height: 104px; 
    margin: 100px; 
    border: 2px solid red; 
    padding: 2px; 
} 
.inner-box { 
    width: 100px; 
    height: 100px; 
    border: 2px solid green; 
} 

ओह ओह, मैं सिर्फ देखा कि आप सिर्फ एक div छोड़ने का अनुरोध किया। खैर, वह पहला समाधान उन आवश्यकताओं को फिट करता है!

Answer 2

कुछ और समाधान। मैं उन्हें सफलतापूर्वक उपयोग किया है:

1.

.box { 
outline:2px solid green; 
border:2px solid transparent; 
box-shadow: 0 0 0 2px red inset; 
} 

इस समाधान का प्रतिबंध: "रूपरेखा" संपत्ति पर ध्यान नहीं देता "बॉर्डर-त्रिज्या" एक।

2.

.box { 
border: 2px solid green; 
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset; 
} 

इस समाधान का प्रतिबंध: लाल और हरे रंग की सीमाओं के बीच की जगह पारदर्शी क्योंकि लाल बॉक्स-छाया के माध्यम से यह दिखाई जाएगी नहीं हो सकता। तो, किसी भी ठोस रंग की जरूरत है, मैंने # एफएफ सेट किया है।

Answer 3

इस अंत की ओर अन्य समाधान के साथ मेरी समस्याओं का हल:

"रूपरेखा ऑफसेट" IE के साथ संगत नहीं है, स्यूडोलेमेंट्स विधि को पूर्ण स्थिति और पिक्सेल अनुपात की आवश्यकता होती है (मेरे उत्तरदायी डिजाइन के लिए कोई अच्छा नहीं); इन्सेट बॉक्स-छाया एक छवि पर प्रदर्शित नहीं होता है।

यहाँ ठीक मैं जवाब देते हुए एक IE संगत रास्ते में छवियों फ्रेम करने के लिए प्रयोग किया जाता है:

.container img { 
     border:2px solid white; 
     outline:4px solid red; 
     background-color: green; 
     padding: 2px; 
} 

"रूपरेखा" बाहरी सीमा को परिभाषित करता है, "सीमा", के बीच रिक्त स्थानों को परिभाषित करता है, जबकि आंतरिक बॉर्डर वास्तव में है पैडिंग के साथ पृष्ठभूमि रंग इसकी चौड़ाई निर्धारित करते हैं।

Answer 4

मामलों में जहां आप ::focus छद्म वर्ग स्टाइल रहे हैं में, आप ::after या ::before छद्म वर्ग का उपयोग कर के लक्जरी नहीं होगा के रूप में उन तरीकों केवल कंटेनर तत्वों पर प्रभावी रहे हैं(अधिक जानकारी के लिए W3C spec. देखना)।

एक पार ब्राउज़र समाधान देना बंद करने के लिए है कि प्रभाव offsetting box-sizing, border, और padding उपयोग करने के लिए है।

आप केवल पैडिंग और सीमा चौड़ाई मानों को अस्वीकार करते हैं और वैकल्पिक करते हैं।

डिफ़ॉल्ट/आधार शैलियों:

input[type="text"] { 
    ... 
    padding:10px; 
    border:1px solid grey; 
} 

छद्म वर्ग शैलियों:

input[type="text"]:focus { 
    padding:8px; 
    border:3px solid red; 
}