：僞元素在Safari中不工作後

我有一個帶動態文本的樣式化句子。有時文本太長，並推動錨點在盒子外部的末端。我想讓文字在span.price-difference之後進行換行，但是要將按鈕定位在p的右側。：僞元素在Safari中不工作後

我在.price-difference上添加了一個:after僞元素。我已經設置了content: ''和display: block。適用於FF，Chrome，IE（包括我必須支持的IE8），但不適用於Safari。

有一個簡單的答案，包裝與其他span以下.price-difference文本，並將其設置爲block，但改變HTML是一件麻煩事，需要一個後端開發人員修改JSP文件，並且我希望避免這種情況。尋找只有CSS的解決方案，如果它存在。

<p class="upsell"> Upgrade To 
    <span class="stateroom-upgrade"> Concierge Class </span> 
    for an additional 
    <span class="price-difference">$7.14 USD </span> 
    per person per day 
    <a href="" class="ccButtonNew"><span>View Upgrades</span></a> 
</p>

的CSS

.upsell { 
    background: none repeat scroll 0px 0px #FAFAFA; 
    border-top: 2px dashed #E8E8E8; 
    color: #666; 
    display: block; 
    font-size: 11.5px; 
    font-weight: 600; 
    margin: auto 19px 5px; 
    padding: 8px 0px 8px 8px; 
    position: relative; 
    text-transform: none; 
    white-space: nowrap; 
    width: 560px; 
} 

.upsell .price-difference { 
    color: #0C82C4; 
    font-size: 15px; 
    font-weight: 700; 
    margin-left: 5px; 
    display: inline-block; 
} 

.stateroom .upsell .price-difference::after { 
    content: ""; 
    display: block; 
} 

.upsell .ccButtonNew { 
    position: absolute; 
    right: 10px; 
    top: 17px; 
}

的p元素上有white-space: nowrap集，但是當我把它關掉，這個問題不會消失。

我認爲它與以下鏈接有關，但我的情況並不相同。在那個問題中，提問者在p中放置了一個塊級元素div，它只接受內聯元素。我在p內部有一個內聯元素span。這應該工作。

:after pseudo-element working in FF, but not Safari or Chrome

來源

2014-01-11 absynthe minded web smith

.stateroom .upsell .price-difference:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 30px; 
    border-top: 1px solid #000; /* placeholder border */ 
}

嘗試添加到後的CSS規則的位置。我有一個類似的情況，其中後僞不會顯示在老版本的safari中，但在所有其他瀏覽器中正常工作。我修正了向CSS添加位置規則。

希望能得到這些結果。

來源

2014-04-03 20:22:00 Elemenofi

這不是CSS選擇器中的額外冒號，實際上是選擇僞元素的正確方法。 Web開發人員不會僅僅因爲Internet Explorer 8不支持CSS3語法而只使用CSS2.1語法。 – pentzzsolt

你是對的，謝謝 – Elemenofi

這幫助我正確對齊一個由Safari中的按鈕標記中的僞元素組成的純css箭頭（準確地說是iPhone 5）。使用邊距和左邊的屬性，我能夠把它做好。 +1 – hardcodepunk

：僞元素在Safari中不工作後

回答

相關問題