設置文本寬度<a>標籤在IE和Chrome中可用，但不能在Firefox中使用

我希望在div寬度中顯示文本「查看所有used-miscellaneous-lasers」，但文本僅在Firefox中出現在div外。這個問題的原因是什麼？如何解決？這裏是我的代碼：設置文本寬度<a>標籤在IE和Chrome中可用，但不能在Firefox中使用

CSS

div.banner a { 
    color: #FFFFFF; 
    display: inline-block; 
    margin-left: -13px; 
    text-decoration: none; 
    width: 100%; 
} 

div.banner { 
    background: url("banner.jpg") no-repeat scroll center top transparent; 
    font-size: 15px; 
    font-weight: normal; 
    height: 38px; 
    margin-top: 20px; 
    padding: 18px 24px 50px 69px; 
    text-align: left; 
    text-transform: uppercase; 
    width: 106px; 
}

HTML

<div class="banner">  
    <a target="_blank" href="http://10.0.0.145/used/b">See All used-miscellaneous-lasers</a> 
</div>

來源

2012-07-11 Chani Poz

的原因是火狐認爲，二手雜激光器是一個字，因此不希望將其換到另一條線。您可以通過在-'s後添加空格或nbsp;來輕鬆解決此問題。

<div class="banner">  
    <a target="_blank" href="http://10.0.0.145/used/b">See All used- miscellaneous- lasers</a> 
</div>

否則到div css，您可以添加word-wrap: break-word;;然而，這個詞不會總是以可讀的形式被破壞。

div.banner { 
    background: url("banner.jpg") no-repeat scroll center top transparent; 
    font-size: 15px; 
    font-weight: normal; 
    height: 38px; 
    margin-top: 20px; 
    padding: 18px 24px 50px 69px; 
    text-align: left; 
    text-transform: uppercase; 
    width: 106px; 
    word-wrap: break-word; 
}

Live DEMO

來源

2012-07-11 13:42:06

試試這個，我已經添加溢出：可見;

div.banner { 
    background: url("banner.jpg") no-repeat scroll center top transparent; 
    font-size: 15px; 
    font-weight: normal; 
    height: 38px; 
    margin-top: 20px; 
    padding: 18px 24px 50px 69px; 
    text-align: left; 
    text-transform: uppercase; 
    overflow:visible; 
    width: 106px; }

來源

2012-07-11 12:58:18 Tschallacka

不，一點用也沒有，它只是增加了一個滾動條。 – 2012-07-11 13:06:01

我的歉意，它應該已經溢出：可見;這會強制元素在包含框外呈現。 – Tschallacka 2012-07-11 13:28:12

他爲什麼希望文字出現在div之外？ – 2012-07-11 13:42:19

設置文本寬度<a>標籤在IE和Chrome中可用，但不能在Firefox中使用

回答

相關問題