लंगर टैग है कि एक छवि

Question

शामिल पर कोई सीमा मैं अपने दस्तावेज़ में लंगर टैग के लिए एक वैश्विक नियम है:

a,a:hover {border-bottom: 1px solid #ccc;} 

लेकिन सीमा छवियों पर अच्छा नहीं लगता है। मैं उत्सुक था अगर एंकर टैग की सीमा को हटाने का कोई तरीका है जिसमें केवल शुद्ध सीएसएस का उपयोग करके एक छवि है?

Answer 1

मैंने पाया इस: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

यह मूल रूप से एक बहुत ही सरल हैक है कि इस तरह दिखता है है:

a img { border:none; vertical-align:top; } 

यह एक आकर्षण की तरह काम करता है और कोई ब्राउज़र-संघर्ष है: अधिक जानकारी के लिए लेख देखें।

Answer 2

नहीं, वर्तमान में सीएसएस में कोई चयनकर्ता नहीं है जो उनके वंशजों के आधार पर तत्वों का चयन करेगा। आपको सीएसएस में जावास्क्रिप्ट या कक्षाओं का उपयोग करने की आवश्यकता होगी।

सबसे मजबूत बात यह है कि आप सभी लिंक पर class विशेषता का उपयोग करेंगे जिसमें छवि नहीं है और आपके सीएसएस नियम में संबंधित क्लास चयनकर्ता का उपयोग करें।

यदि आपके अधिकांश लिंक में कोई छवि नहीं है, तो आप नकारात्मक दृष्टिकोण का उपयोग कर सकते हैं और उस लिंक पर एक वर्ग सेट कर सकते हैं जिसमें छवि है, class=imagelink कहें, और :not(.imagelink) सीएसएस में चयनकर्ता का उपयोग करें। :not(...) पर समर्थन व्यापक है लेकिन सार्वभौमिक नहीं है।

a.imagelink {border-bottom: none;} 

Answer 3

संभव नहीं, दुर्भाग्य से: एक अभी तक एक और दृष्टिकोण, इस तरह के समर्थन पर भरोसा कर नहीं, आपके सवाल में के रूप में सभी लिंक पर निचली सीमा सेट करें और फिर छवि लिंक के लिए इसे बंद करने के लिए है! मुझे लगता है मैंने केवल jquery का उपयोग करके ऐसा किया है।

http://www.w3schools.com/cssref/css_selectors.asp

Complex CSS selector for parent of active child

Is there a CSS parent selector?

Answer 4

यह संभव css नहीं उपयोग कर रहा है लेकिन आप इसे css का उपयोग कर यदि आप cssParentSelector.js स्क्रिप्ट जो jQuery का उपयोग करता जोड़ने कर सकते हैं। Here is an example

a! > img { border: none; }​ 

css शासन ऊपर

a टैग से सीमा को हटा अगर यह एक img टैग की मूल है, लेकिन अभी भी अब यह शुद्ध css नहीं है, dependendencies है।

Answer 5

vertical-align चाल केवल गैर-पारदर्शी छवियों के साथ काम करता है [अच्छी तरह से], और अगर aline-height छवि की ऊंचाई से अधिक है (लगता है छोटे सामाजिक नेटवर्किंग प्रतीक) सब पर काम नहीं करता।

मेरी इच्छा है कि मैं यहां स्वीकृत समाधान का उपयोग कर सकूं, लेकिन यह ऊपर दिए गए मुद्दों के साथ टेक्स्ट ब्लॉक के भीतर इनलाइन छवियों के संरेखण को फेंकता है।

मैं के नीचे एक ठोस सफेद box-shadow करने के लिए बस गया हूं, शायद आईई 8 और पुराने के लिए बैकअप filter छाया, और इसे एक दिन कॉल कर रहा हूं।लेआउट के साथ गड़बड़ नहीं है:

a { text-underline: none; 
    border-bottom: 1px solid blue; } 

a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */ 
     filter: progid:DXImageTransform.Microsoft.Shadow... etc } 

Answer 6

जैसा कि आपके प्रश्न के अन्य उत्तरों के अनुसार कहा गया है, अब तक सीएसएस के साथ ऐसा करना संभव नहीं है। लेकिन आप jQuery, महान इस काम का उपयोग करता है, तो:

$(document).ready(function(){ 

    $('a img').parent().css('border','none'); 

}); 

यह मूल रूप से के बाद पृष्ठ लोड होता है एक छवि से युक्त लिंक खोज और राज्य सीएसएस नियम सीमा: कोई नहीं; छवि के मूल तत्व के लिए, यानी। सम्बन्ध।