Span是一个内联元素。它没有宽度和高度。

您可以将其转换为块级元素，然后它将接受您的维度指令。

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

span默认情况下是内联显示的，这意味着它们没有高度和宽度。

尝试在span中添加一个display: block。

Span开始时是一个内联元素。例如，您可以将其显示属性更改为block，然后其高度/宽度属性将开始生效。

尝试使用div代替span或使用CSS display: block;或display: inline-block; -span是默认的inline元素，不能接受width和height属性。

只有当我们将Span设置为块元素时，它才具有宽度和高度。

span {display:block;}

根据@Paul的评论，如果指定了display: block, span将停止为内联元素，并在下一行出现后成为元素。

我来这里是为了解决跨度高度的问题，我自己找到了一个解决方案

添加溢出:隐藏;并保持内联将解决刚刚在IE8 Quirks模式中测试的问题

受到@Hamed的启发，我添加了以下内容，对我来说很有效:

display: inline-block; overflow: hidden; 

Span {display:block;}还添加了一个换行符。

为了避免这种情况，使用span {display:inline-block;}，然后你可以为inline元素添加宽度和高度，你也可以在块中对齐它:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

更多的在这里

现在有多种方法来模拟相同的效果，但根据用例进一步定制属性。如上所述，这是有效的:

.product__specfield_8_arrow { display: inline-block } 

但也

.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table

这个JSFiddle显示了这些显示属性在本例中的相似程度。

有关讨论请参阅这篇SO帖子。

用这一切解决问题的方法

试一试. .

span.product__specfield_8_arrow
{
    display: inline-block;
}

我处理这个问题的方法是使用一个无边界的只读输入标记，然后你可以根据需要设置属性:

 <input  type="text" readonly 
   style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;" 
      [value]="statusMessage">