Question

我已经做了一些搜索，但无法找到我想要的答案。如果它是重复的，请告诉我我应该前往的地方。

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

具体来说，（详见下文）我有一个常规的内联，绝对定位，以文本为中心的span容器，其中包含两个span，一个内联阻塞，绝对定位（class =＆＃34; arrow＆＃ 34;）和一个被阻止的跨度（class =＆＃34; text＆＃34;）。在Chrome中，箭头类范围左侧对齐内部容器。但是，在FF11中，箭头级跨度中心 - 在容器内部对齐。

所以，我的问题是：

为什么箭头级跨度在Chrome和FF11中表现不同（由于某些原因，FF7具有Chrome行为）？
哪个浏览器显示＆＃34;右＆＃34; span继承属性？
我可以通过使文本类跨度成为内联块来使两个浏览器的行为方式相同，但我不明白为什么这会有所帮助...
由于文本类跨度是一个阻塞的跨度，不应该导致容器级跨度（及其边框）为100％宽度？现在，容器类在文本类范围内折叠。（这可能是一个单独的主题，但如果我能得到一个快速的答案，它会很好。）

DisplayProps.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;
}

帮助表示感谢，谢谢！

Answer 1

箭头的位置是绝对的，但您没有定义顶部/底部和左/右值。因此浏览器采用不同的默认值。

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

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

另见this example。

=== UPDATE ===

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

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

请参阅updated example。

P.s。：仅在定义距离时使用位置绝对值。

当跨度被阻挡+绝对定位时，文本对齐的行为会有所不同

1 个答案: