css – ：伪元素在Safari中不工作

我有一个带有动态文本的样式句子.有时候,文字太长,并将锚点推到箱子外面.我希望文本在span.price-difference之后换行,但是锚点按钮位于p的右侧.

我添加了一个：伪元素到.price-difference之后.我已经设置了内容：”并显示：block.在FF,Chrome,IE(包括IE8,我必须支持),而不是Safari.

有一个简单的答案,将文本包含在与其他范围的.price-差异之后,并将其设置为阻止,但是更改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元素具有空格：nowrap设置在其上,但是当我关闭它时,问题不会消失.

我认为这与以下链接有关,但我的情况是不一样的.在这个问题上,asker把一个block级别的元素div放在一个p中,它只需要内联元素.我有一个内联元素,跨度,在p内.这应该工作.

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

解决方法

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

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

希望这个hepls.

css – ：伪元素在Safari中不工作

解决方法

猜你在找的CSS相关文章