1

我已经进行了一些搜索，但找不到我正在寻找的答案。如果它是重复的，请告诉我我应该去的地方。

无论如何，我一直无法弄清楚跨度的继承（如果有的话）行为，一旦我开始在跨度中制作不同的样式组合，Firefox 和 Chrome 似乎就会有所不同。

具体来说，（有关更多详细信息，请参见下文）我有一个常规内联、绝对定位、以文本为中心的跨度容器，其中包含另外两个跨度，一个内联阻塞、绝对定位 (class="arrow") 和一个阻塞跨度 (类=“文本”）。在 Chrome 中，箭头类跨度在容器内左对齐。然而，在 FF11 中，箭头类跨度在容器内居中对齐。

所以，我的问题是：

  1. 为什么箭头类跨度在 Chrome 和 FF11 中的行为不同（FF7 出于某种原因具有 Chrome 行为）？
  2. 哪个浏览器显示“正确的”跨度继承属性？
  3. 我可以通过使 text-class span 成为内联块来使两个浏览器的行为方式相同，但我不明白为什么这会有所帮助......
  4. 由于文本类跨度是一个阻塞跨度，它不应该导致容器类跨度（及其边界）为 100% 宽度吗？现在，容器类在文本类跨度周围折叠。（这可能在一个单独的线程中，但如果我能得到一个快速的答案会很好）。

显示道具.html：

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="displayProps.css">
    </head>
    <span class="container">
        <span class="arrow"></span>
        <span class="text">Why is the arrow different?</span>
    </span>
</html>

displayProps.css：

span.container {
    display: inline;
    position: absolute;
    border: 2px solid; 
    text-align:center;
}

span.container span.arrow { 
    border-color: transparent black transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    display: inline-block;
    position: absolute;
}

span.container span.text {
    display: block;
}

帮助表示赞赏，谢谢！

4

1 回答 1

0

箭头具有绝对位置，但您尚未定义顶部/底部和左侧/右侧值。所以浏览器采用它们的默认值，这是不同的。

添加例如以下代码，它们应该具有相同的位置：

span.container span.arrow {
    ...
    top: 10px;
    left: 10px;
}

另请参阅此示例。

=== 更新 ===

如果将容器更改为相对位置并显示块，则宽度将为 100%。

span.container {
    display: block;
    position: relative;
    ...
}

请参阅更新的示例。

Ps：仅在定义距离时才使用绝对位置。

于 2012-03-21T07:14:13.317 回答