Css 第一行选择器Chrome_Css_Google Chrome_Css Selectors

Css 第一行选择器Chrome

css google-chrome

Css 第一行选择器Chrome,css,google-chrome,css-selectors,Css,Google Chrome,Css Selectors,我对Chrome中的：：first-line选择器有问题。在Firefox甚至IE11中，结果看起来是正确的以下是我所期望的：以下是我在Chrome中得到的：但Chrome中存在一种奇怪的行为，它会导致正确的渲染：打开显影剂面板（F12）选择“t1b”项取消选中“框阴影”属性再打勾下面是一个示例链接： t1 t1b t2 身体{ 字体大小：50px； } .测试{ 宽度：2.5em；高度：3em；线高：3em；显示：内联块；位置：相对位置；溢出：隐藏；盒影：

我对Chrome中的：：first-line选择器有问题。在Firefox甚至IE11中，结果看起来是正确的

以下是我所期望的：
以下是我在Chrome中得到的：

但Chrome中存在一种奇怪的行为，它会导致正确的渲染：

打开显影剂面板（F12）
选择“t1b”项
取消选中“框阴影”属性
再打勾

下面是一个示例链接：


t1
t1b
t2
身体{
字体大小：50px；
}
.测试{
宽度：2.5em；
高度：3em；
线高：3em；
显示：内联块；
位置：相对位置；
溢出：隐藏；
盒影：嵌入50px-50px 0 0青色；
}
.测试跨度{
字体大小：13px；
}
第一行{
字体大小：13px；
}

“t1”没有“一线”（在铬合金中工作良好）
“t1b”具有“第一线”（不适用于Chrome）
“t2”有“一线”，但用于子元素（在铬中工作良好）

我需要t1b在Chrome中工作

我的CSS有任何错误吗

是否有无子元素的变通方法

感谢您的帮助。

这似乎是一个Chromium错误，尽管我在Github问题中没有发现类似的问题（不过，它可以在未来的版本中解决）

您有两个选择：

1-在跨距前添加一个空div。如果在内联块之前放置一个空块元素（不知道为什么），这似乎是可行的

这似乎是一个Chromium Bug，尽管我在Github问题中没有发现类似的问题（不过，它可以在未来的版本中解决）

您有两个选择：

1-在跨距前添加一个空div。如果在内联块之前放置一个空块元素（不知道为什么），这似乎是可行的

display:inline flex

而不是

inline block

似乎工作正常，但对我来说，这似乎是Chrome中的一个bug。

display:inline flex

而不是

inline block

似乎工作正常，但对我来说，这看起来像是Chrome中的一个bug。

inline flex

乍一看似乎还可以，但在这种情况下，

first-line

选择器被忽略了。“t1”和“t1b”的字体大小不为

13px

。

解决方案非常奇怪，但似乎很有效。我没有子元素（只有一个兄弟姐妹），这对我来说很好。感谢您的帮助。

inline flex

乍一看是正常的，但是在这种情况下，

first-line

选择器会被忽略。“t1”和“t1b”的字体大小不为

13px

。

解决方案非常奇怪，但似乎很有效。我没有子元素（只有一个兄弟姐妹），这对我来说很好。谢谢你的帮助。

<body>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>

body {
  font-size: 50px;
}
.test {
  width: 2.5em;
  height: 3em;
  line-height: 3em;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: inset 50px -50px 0 0 cyan;
}
.test span {
  font-size: 13px;
}
.firstLine::first-line {
  font-size: 13px;
}

<body>
<div></div>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>

.test {
  display: inline-block; /* OLD */
  display: inline-flex; /* NEW */
}