CSS “概述” Webkit 和 Gecko 上的不同行为行为

Posted 2023-03-06

【中文标题】CSS “概述” Webkit 和 Gecko 上的不同行为行为

【英文标题】：CSS "outline" different behavior behavior on Webkit & Gecko

【发布时间】：2012-05-26 15:13:28

【问题描述】：

我正在进行一项实验，我发现“大纲”CSS2 属性在 Webkit 和 Gecko 上的实现方式不同

在下面的脚本中，我在另一个 div 内有一个绝对位置 div，但在它之外浮动。 Webkit 上的大纲勾勒出实际的父 div，而在 Gecko 上，它会扩展以覆盖子项。

http://jsfiddle.net/KrCs4/

我错过了什么吗？我需要在 Gecko 上覆盖一个属性吗？还是应该将其报告为错误？

Webkit 截图：

火狐截图：

编辑：

已确认是一个错误，这里有一个解决方法：http://jsfiddle.net/7Vfee/（您需要确保父对象的位置：相对或绝对，此解决方法才能起作用。

【问题讨论】：

呃不知道，我尝试了不同的方法

Firefox 错误：bugzilla.mozilla.org/show_bug.cgi?id=687311

【参考方案1】：

我已经修复了使用这个而不是绝对定位：

transform: translate(x,y);

.outer 
    position: absolute;
    top: 20px;
    left: 20px;
    height: 50px;
    width: 100px;
    background: blue;
    border: 3px solid green;
    outline: 3px dotted red;

.inner 
    position: absolute;
    transform: translate(80px, 15px);
    width: 40px;
    height: 20px;
    background: yellow;

<div class="outer">
    <div class="inner">
    </div>
</div>

【参考方案2】：

我遇到了同样的问题，所以我把它从使用轮廓换成使用盒子阴影：

box-shadow: 0px 0px 0px 1px #FFF;

而不是

outline:1px #dcdcdc solid;

【讨论】：

稍后发表评论，但我想补充一点，Firefox 还会在 CSS 中添加的任何 :after 内容周围绘制轮廓。使用上面的 box-shadow 将解决问题。事实上，我能想到的将大纲用于任何东西的唯一原因是 IE8 支持——显然它可以做大纲但不能做 box-shadow。

@crowhill 使用大纲的另一个原因是因为它提供了一种添加偏移量的方法。

【参考方案3】：

Gecko 的这种不一致的行为是众所周知的，并且有充分的记录，虽然奇怪的是不是在 MDN，而是在 SitePoint Reference：

Firefox 3.5 及以下版本将围绕超出其边界的元素内容而不是围绕元素的实际设置尺寸绘制轮廓。

这将继续影响所有版本的 Firefox。目前我没有看到可行的解决方法，除了从其父级中删除绝对定位的 div 并将其相对于...其他东西。

【讨论】：

为什么 SitePoint 的文档比 W3C 官方规范多？ w3.org/TR/CSS2/ui.html#dynamic-outlines

@Xavier Ho：SitePoint 专注于浏览器兼容性和行为。定义实现细节不是规范的工作。

W3C 的工作是定义浏览器行为，而不管实现如何。据我所知，就尺寸而言，轮廓不是很明确。

哦，那是你指的是什么。是的，确实，它没有在其中指定......因此称其为“不一致的行为”而不是彻底的“错误”。

感谢您指出这一点。可以在此处找到该错误：bugzilla.mozilla.org/show_bug.cgi?id=480888 我用解决方法更新了我的问题。