当您组合大纲和伪元素时,Firefox的行为与Chrome和Safari(我没有测试过其他浏览器)的行为不同.
有没有办法解决它或这是一个错误？
有没有办法解决它或这是一个错误？
- .main {
- position: relative;
- width: 100px;
- height: 100px;
- margin: 10px auto;
- border: 2px solid #f00;
- outline: 2px solid #00f;
- }
- .main:after {
- content: 'Hello';
- position: absolute;
- width: 100px;
- text-align: center;
- bottom: -50px;
- }
- .wtf {
- width: 400px;
- margin: 90px auto;
- }
- <div class="main"></div>
- <div class="wtf">
- <p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
- <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
- </div>
演示：http://codepen.io/romainberger/pen/nuxlh
编辑：
在Firefox 20.0,Chrome 28和Safari 5.1中测试过
解决方法
现在习惯了
盒子阴影
像这样
- .main {
- position: relative;
- width: 100px;
- z-index:1;
- height: 100px;
- margin: 10px auto;
- border: 2px solid #f00;
- Box-shadow:0px 0px 0px 3px #00f;
- }
- .main:after {
- content: 'Hello';
- position: absolute;
- text-align: center;
- bottom: -50px;
- left:0;
- right:0;
- z-index:2;
- }
- .wtf {
- width: 400px;
- margin: 90px auto;
- }
