सीमा रंग ऑर्डर

Question

मेरे पास प्रत्येक सीमा सेट के साथ 1px चौड़ाई ठोस है। मैं शीर्ष, बाएं और नीचे की सीमा को काला होना चाहता हूं, और दाएं सीमा सफेद होने के लिए चाहते हैं। तो, मैं इस सीएसएस कोड

border-right-color: white;  
border-left-color: black; 
border-top-color: black; 
border-bottom-color: black; 
border: solid 1px; 

समस्या IE9, जहां ऊपरी दाएं कोने पिक्सेल सफेद हो जाएगा में आता है, लेकिन निचले दाएं कोने काला हो जाएगा।

मुझे लगता है समस्या, जिस तरह से IE9 शैली पुनर्निर्माण के रूप में आता है क्योंकि जब मैं developper उपकरण कंसोल में मेरी मेज के सीएसएस को देखो, यह इस तरह का आदेश दिया जाता है:

border-top-color: black; 
border-right-color: white; 
border-bottom-color: black; 
border-left-color: black; 
border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 

यह मुझे सोचने दो कि, शायद, परिभाषित रंगों के लिए उपयोग किया जाने वाला आदेश इसे बनाता है ताकि शीर्ष सीमा रंगीन काला हो, फिर दायां सीमा रंगीन सफेद (शीर्ष दाएं कोने को ओवरराइट करना) हो, फिर नीचे की सीमा रंगीन काला (निचले दाएं कोने को ओवरराइट करना) है और बाएं सीमा बाएं सीमा रंगीन बाएं है।

बात यह है कि, एक सफेद पृष्ठभूमि पर, ऊपर और नीचे सीमाएं एक ही लंबाई (एक पिक्सेल द्वारा) दिखाई नहीं देती हैं। यह बहुत अधिक नहीं हो सकता है, लेकिन मुझे अपने पृष्ठ पर अन्य लाइनों के साथ फिट करने के लिए उन दो सीमाओं की आवश्यकता है।

तो, मैं इसे कैसे ठीक कर सकता हूं? क्या यह वाकई सीमाओं के रंग के बारे में है, और यदि यह है, तो मैं इसे कैसे बदल सकता हूं?

Answer 1

तो, यहाँ यह है, वास्तव

border: solid 1px black; 
border-right-style: hidden; 

में बहुत सरल सही सीमा एक शैली छिपा देकर, यह पूरी तरह अब काम करता है। बात यह है कि छिपी हुई शैली वाली सीमा किसी भी अन्य शैली से पहले या गिरने वाली सीमाओं के लिए आगे बढ़ेगी।

Answer 2

आदेश जो आप सीमा रंगों को छिड़काव करते हैं, वह अप्रासंगिक है। ब्राउज़र बस सीमाओं को विभिन्न तरीकों से प्रदर्शित करते हैं। कोने में पिक्सल दोनों तरफ से रंग प्राप्त करते हैं, और यह इस बात पर निर्भर करता है कि आप किस ब्राउजर का उपयोग कर रहे हैं।

कई अलग-अलग विधियों का उपयोग किया जाता है। यहाँ सबसे आम ब्राउज़रों हैं, और वे कैसे कोनों आकर्षित:

इंटरनेट एक्सप्लोरर:

+----------------------+--+ 
|      | | 
+----------------------| | 
| |     | | 
| |     | | 
| |     | | 
| +----------------------+ 
| |      | 
+--+----------------------+ 

फ़ायरफ़ॉक्स:

+--+----------------------+ 
| |      | 
| +----------------------+ 
| |     | | 
| |     | | 
| |     | | 
+----------------------| | 
|      | | 
+----------------------+--+ 

क्रोम:

+--+----------------------+ 
| |      | 
| |----------------------+ 
| |     | | 
| |     | | 
| |     | | 
| +----------------------+ 
| |      | 
+--+----------------------+ 

012,

सफारी:

+--+-------------------+--+ 
| |     | | 
| |-------------------| | 
| |     | | 
| |     | | 
| |     | | 
| +-------------------+ | 
| |     | | 
+--+-------------------+--+ 

ओपेरा:

+-------------------------+ 
|       | 
+-------------------------+ 
| |     | | 
| |     | | 
| |     | | 
| +-------------------+ | 
| |     | | 
+--+-------------------+--+ 

ऐसा लगता है कि लगभग रूप में अगर अलग ब्राउज़र विक्रेताओं के लिए एक विधि है कि सभी अन्य ब्राउज़र से अलग है उपयोग करने के लिए अपने रास्ते से बाहर गया ..

(हाल के संस्करणों में परीक्षण किया गया। किसी भी ब्राउज़र के पुराने संस्करण संभवतः इसे अलग-अलग कर सकते हैं, लेकिन यह वास्तव में महत्वपूर्ण नहीं है क्योंकि वे वैसे भी भिन्न हैं।)

तो, अगर आपको कोनों को खींचा जाने पर पूर्ण नियंत्रण की आवश्यकता है, तो आप प्रत्येक के अंदर दो तत्वों का उपयोग कर सकते हैं अन्य, दूसरे पर एक और क्षैतिज सीमाओं पर लंबवत सीमाएं डालें।

Answer 3

आप इस प्रकार लिख सकते हैं:

div{ 
border:1px solid black; 
border-right-color:white; 
}