:在伪元素在Safari中不起作用之后

Question

我有一个动态文本的样式句子.有时文本太长,并将锚点推到盒子外面的末端.我希望文本在之后换行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

Answer 1

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

尝试在after的css规则中添加一个位置.我有一个类似的情况,其中after伪不会在旧版本的safari中显示,但在所有其他浏览器中正常工作.我修复了向css添加位置规则的问题.

希望这个肝脏.