web-dev-qa-db-ja.com

：Safariで疑似要素が機能しない後

ダイナミックテキストを使用したスタイル付きの文があります。テキストが長すぎて、ボックスの外側の端にあるアンカーを押すことがあります。テキストをspan.price-differenceの後に折り返したいのですが、アンカーボタンをpの右側に配置します。

:after疑似要素を.price-differenceに追加しました。 content: ''とdisplay: blockを設定しました。 FF、Chrome、IE（私がサポートしなければならないIE8を含む）で動作しますが、Safariでは動作しません。

.price-differenceに続くテキストを別のspanでラップし、それを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が設定されていますが、オフにしても問題は解決しません。

次のリンクに関連していると思いますが、私の状況は同じではありません。その質問では、質問者はブロックレベルの要素divをpの中に入れました。これは、インライン要素のみを取ります。 span内にインライン要素pがあります。このは動作するはずです。

：FFで疑似要素が機能した後、SafariやChromeでは機能しません

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

afterのcssルールに位置を追加してみてください。私は同様の状況で、after pseudoが古いバージョンのsafariで表示されないが、他のすべてのブラウザーでは正しく機能するという状況がありました。 cssに位置ルールを追加するのを修正しました。

このheplsを願っています。

8
Elemenofi