ie8＆＃34;内容：attr（foo）;＆＃34;表现得很奇怪

Question

我有以下css代码：

.steps .step:before {
  content: attr(data-number);
  /* IE8? */
  display: block;
  width: 60px;
  height: 60px;
  font-size: 36px;
  font-weight: 300;
  line-height: 60px;
  text-align: center;
  color: #18bfa3;
  border: 1px solid #18bfa3;
  border-radius: 55%;
  position: absolute;
  left: -70px;
}

然后应用于div：

<div class="steps">
 <div class="step animate" data-number="1">
  Some content
 </div>
 <div class="step animate" data-number="2">
  Some content
 </div>
</div>

在现代浏览器中一切正常，但在IE8中，我得到带有边框和所有内容的:before元素，但没有内容（即数字），如果我检查元素，则css显示content: attr(data-number); FONT-WEIGHT: 300所有都在同一条线上，就像线路制动器不在那里。见附件截图。

知道为什么会这样，我怎么能阻止它？

编辑：

这是渲染的布局。注意空矩形，即数字应该在哪里，矩形实际上是渲染的:before伪元素。

Answer 1

在IE8中测试这个很难，因为代码编辑器在IE9之前不能工作，但你确定不是因为你已经声明了left: -70px;吗？您使用的所有值都是有效的，并且在IE8中受支持（它支持:before，它支持content:，它支持attr()，并且它支持自定义data-属性）。请参阅this SO answer。

position: absolute;内容的默认定位为自动，除非您设置了顶部，右侧，左侧或底部。您只声明了{strong> left 值-70px;。这会将元内容70px移动到文档窗口左边缘的左侧，因此它们不可见。

如果您希望它们出现，则需要删除此值，或将其更改为left: 70px;。