html - 影响轮廓的伪元素

标签 html css

<分区>

很确定这是 Firefox 的一个错误,但也许有人可以权衡一下。

我正在围绕一个 100x100 的框应用轮廓。当您使用绝对定位的伪元素时,它应该将其从文档流中移除,但它似乎仍在影响 outline 属性的流。 IE 和 Chrome 似乎按照我的预期呈现它,其中黑色轮廓保持在主要元素的位置。有什么想法吗?

enter image description here

.content
{
  width:100px;
  height:100px;
  outline:1px solid black;
  border:1px solid yellow;
  position:relative;
}

.content:after
{
  position:absolute;
  content:'pseudo';
  background-color:salmon;
  width:200px;
  top:150px;
}
<div class='content'></div>

http://jsbin.com/gatupogiwi/1/edit?html,css,output

最佳答案

您可以将 outline 样式更改为 box-shadow:

outline:1px solid black;

到:

box-shadow: 0px 0px 0px 1px black;

关于html - 影响轮廓的伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31883671/

相关文章:

JavaScript - 仅重复 javascript 代码

php - Javascript/HTML进行形状识别

html - 在这种情况下垂直对齐的正确方法是什么?

html - 如何并排放置响应式文本和 div

css - 样式代码和前置标签的问题

php - 从数据库中填充 HTML 表单下拉列表

jquery - 显示 jquery 中跨度类中按钮单击的值

html - 循环文本轮播的关键帧动画出现问题

html - div 与其内部的 div 一样宽

html - 内部 div 中的滚动条,而父级只有最大高度