超鏈接圖像周圍的HTML，但在瀏覽器

http://starterpad.com/blog/超鏈接圖像周圍的HTML，但在瀏覽器

<div id="logo"> 
    <a href="http://starterpad.com/blog/"><img src="http://starterpad.com/blog/wp-content/uploads/2014/11/copy-StarterPad-logo-new.png" height="61" width="321" alt="StarterPad Blog"></a> 
</div>

不可點擊正如你所看到的，還有周圍的<img>標籤爲標誌的<a href>標籤。但在瀏覽器中（嘗試了幾次），徽標圖像不可點擊。

任何想法爲什麼不呢？

來源

2014-11-06 Kane

看起來您所發佈的代碼沒有問題：http://jsfiddle.net/vjs14ytr/ – hoverbikes 2014-11-06 02:23:31

這只是WP網站的代碼片段，鏈接位於我的帖子的頂部。 – Kane 2014-11-06 04:27:38

原來這個WP插件是罪魁禍首： https://wordpress.org/plugins/contact-bank/

停用它解決了這一問題。

來源

2014-11-06 02:38:17 Kane

它是可點擊的，因爲當我在jsfiddle中嘗試它時，這意味着某些圖層重疊了您的鏈接，因此它不可點擊。

下面是與您的標誌div重疊的圖層。

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
</div>

所以第一修復是所有上述脂肪酶已經提到的，使用「右拉」集結類或在具有更高piority重新調整這些層，以避免重疊的CSS。

另一個修復方法是使用z-index。我會建議ü下面添加屬性，將其設置爲頂部，它的點擊

<div class="navbar-header" style="position: relative;z-index: 1;">

.........

來源

2014-11-06 02:21:09 BOBO

這是因爲其他分區是在它的上面。這傢伙

<div class="collapse navbar-collapse navbar-ex1-collapse">...</div>

它與「display：table」有關。樣式設置在6555行的bootstrap.min.css中。如果關閉該屬性，則div變小並停止覆蓋徽標。

來源

2014-11-06 02:21:19 Sergey

看來，這個div可以完全刪除。 – misterManSam 2014-11-06 02:31:27

看起來像你的div導航欄在圖像上，所以當你的鼠標實際上在導航欄上。添加「拉右」類到您的導航欄，它應該修復它。

<div class="collapse navbar-collapse navbar-ex1-collapse pull-right"></div>

來源

2014-11-06 02:24:06 amamut

請注意，根據[Bootstrap組件頁面]（http://getbootstrap.com/components/#dropdowns-alignment），自v3.1.0開始已棄用'pull-right'對齊方式。無論如何，這個div似乎可以在這個例子中被徹底刪除。 – misterManSam 2014-11-06 02:34:29

如果您閱讀了評論，他們會說只有在下拉菜單中：「從v3.1.0開始，我們已經在下拉菜單中棄用了.pull-right。」他們還表示，v3.1.0中存在快速浮動，它利用了右拉和左拉類：http://getbootstrap.com/css/#helper-classes-floats – amamut 2014-11-06 02:39:19

我對Bootstrap不夠了解，對於某些。那麼這在技術上不適用？「」不適用於navbars。要將navbars中的組件與實用程序類對齊，請使用.navbar-left或.navbar-right。有關詳細信息，請參閱navbar文檔。或者是導航項目本身？ – misterManSam 2014-11-06 02:49:22

超鏈接圖像周圍的HTML，但在瀏覽器

回答

相關問題