Firefox錨大綱問題

下面的代碼片段導致我頭痛QA。Firefox錨大綱問題

<div id="links-container"> 
    <ul> 
    <li class="resource-link li-sep"><a href="http://www.somesite.com/members/category/?catID=8" target="_blank"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>&raquo;</span></a></li> 
    <li>...etc...</li> 
    </ul> 
</div>

我在CSS中試過，但沒有任何工作;

#links-container ul li a { color:#C28234; } 
#links-container ul li a span { font-size:140%; line-height:1em; } 
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; } 
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; } 
#links-container ul li a:hover { color:#75450A; }

發生了什麼事是，在Firefox中，當您通過鏈接選項卡，它的周圍創造兩套文字具有非常接近，彼此都造成重疊輪廓的輪廓。

我們的項目管理者希望保持輪廓以促進可訪問性。

如果您在Chrome中查看它，它會將大綱中的所有內容都包裹起來。我們認爲這是完美的。我的問題是，可以做些什麼可以在Firefox中複製這個。或者至少，清理它，以便當Firefox單獨列出同一鏈接中的每個文本項目時，輪廓看起來不像糞便。

其他任何人都必須處理這個？如果是這樣，你怎麼過去呢？

感謝

來源

2011-11-11 Skittles

嘛。這是一個部分解決方案，但可以在你的情況下工作。如果您對菜單項有問題，則只能應用「display：inline-block;」在這裏鏈接，使它有一個共同的輪廓。

實施例：jsfiddle.net/zDbsQ/2/

編輯：固定連結例如，原來是錯誤的。

來源

2011-11-11 22:39:44

謝謝阿列克謝！參考中的鏈接不是菜單項，而只是標準列表中的鏈接列表。如果您使用Chrome和標籤查看您的Fiddle示例，那麼您會看到Chrome如何將多行鏈接概括爲單個輪廓。 Firefox將分別包裝每個文本項目。爲了不讓鏈接看起來不好，我想要實現Chrome正在做的事情。這甚至有可能嗎？ – Skittles

不幸的是，我找不到一個可用作Webkit瀏覽器的解決方案，可能它存在，但我不知道它。我修正了一些例子（由於某種原因，它沒有「display：inline-block;」），我最好能夠做到這一點。 –

Alexey ...我仍然在試着看看你改變了什麼，但是你所做的任何事情都完全是我需要的！謝謝你太多了！傑出的工作！ – Skittles

你可以使用：

#links-container ul li a *{ outline: none; }

這將選擇的一個內的所有元素和禁用輪廓..

來源

2011-11-11 22:34:10 Kyle

Firefox錨大綱問題

回答

相關問題