Firefox中的负定位绝对元素

Question

我试图消极定位一个绝对简单的元素。除Firefox外，它在所有浏览器中都能正常工作。蓝色处理程序框应位于顶部边框的中间，而不是您可以在Chrome，IE或Safari上看到。有没有解决方法来解决Firefox的这个问题。

任何帮助都将不胜感激。

body {
    padding-top: 10em
}

[draggable] {
    outline: 1px dashed #0099FF;
	cursor: move;
    position: relative
    }


.handler {
	width: 34px;
	height: 16px;
	background-color: #0099FF;
	margin: 0 auto;
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	}
	

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
    <div class="container">
        <div class="row">
            <div draggable="true" class="parent col-lg-12 text-center">
                <h2 class="section-heading">Services</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                <div class="handler"></div>
            </div>
        </div>
    </div>
</section>

  

Answer 1

使用border代替outline。

＆＃13;

＆＃13;

body {
    padding-top: 10em
}

[draggable] {
    /* Use border */
    border: 1px dashed #0099FF;
	cursor: move;
    position: relative
    }


.handler {
	width: 34px;
	height: 16px;
	background-color: #0099FF;
	margin: 0 auto;
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	}
	

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
    <div class="container">
        <div class="row">
            <div draggable="true" class="parent col-lg-12 text-center">
                <h2 class="section-heading">Services</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                <div class="handler"></div>
            </div>
        </div>
    </div>
</section>

  

＆＃13;

＆＃13;

＆＃13;