在包含圖像

錨標籤無邊框我有我的文檔中的錨標籤通用規則：在包含圖像

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

但邊界並不好看的圖像。我很好奇，如果有一種方法可以刪除包含僅使用純CSS的圖像的定位標記的邊框？

來源

2012-12-29 Nojan

基本上你想要將所有的作爲孩子。在純CSS中（據我所知）你不能定位對象的父對象。你將不得不爲此目的使用Javascript/jQuery。見http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child –

我發現這一點：http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

它基本上是一個非常簡單的黑客，看起來像這樣：

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

它的工作原理就像一個魅力，也沒有瀏覽器的衝突：見文章瞭解更多詳情。

來源

2013-07-29 13:17:51 exotec

太棒了！謝謝。 – Nojan

雖然，我注意到事端。如果圖像採用PNG格式並且透明，則可以看到背後的邊框。所以不冷靜。但是再次需要了解的東西。 @exotec – Nojan

沒有，目前在CSS沒有選擇，將選擇他們的後代的基礎上的元素。您需要在CSS中使用JavaScript或類。

最強勁，你會在不包含的圖像，並在你的CSS規則中使用相應的類選擇所有鏈接使用class屬性。

如果你的大多數鏈接不包含一個圖像，你可以用消極的方法以及對那些包含圖像，說class=imagelink鏈接類，並在CSS中使用:not(.imagelink)選擇。對:not(...)的支持很普遍，但並不普遍。又一個方法，而不是指望這樣的支持，是設置在各個環節底部邊框在你的問題，然後將其關閉圖像鏈接：

a.imagelink {border-bottom: none;}

來源

2012-12-29 20:03:08

非常好的想法！肯定+1。 –

不可能的，可惜！我想我只使用jquery來完成此操作。

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

Complex CSS selector for parent of active child

Is there a CSS parent selector?

來源

2012-12-29 20:04:17

這是不可能的使用css但你可以使用它，如果css添加cssParentSelector.js腳本使用jQuery做。 Here is an example

a! > img { border: none; }

上述css規則將刪除a標籤邊框如果它是一個img標籤的父母，但還是現在不是純粹css，有dependendencies。

來源

2012-12-29 20:09:21

vertical-align只能在非透明圖像下正常使用，並且如果aline-height大於圖像高度（認爲是小型社交網絡圖標）則根本不起作用。

我希望我能在這裏使用接受的解決方案，但它拋出了內嵌圖像的比對文本塊中，與上面的問題一起。

我已經在a > img的底部爲白色box-shadow做好了準備，可能是爲IE8和更舊的版本備份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 }

來源

2014-01-16 16:54:31 atwixtor

您可能還想將一個'vertical-align：bottom;'添加到'img' – alpipego

至於說其他的回答你的問題，這是不可能的，現在用CSS做。但是，如果你使用jQuery，這個工作很大：在頁面加載搜索包含圖像的鏈接，並說明CSS規則它基本上後

$(document).ready(function(){ 

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

});

邊界：無;爲圖像的父元素，即。鏈接。

來源

2017-09-15 01:04:05 caos30

回答

相關問題