Question

Microsoft Edge忽略具有相对值的CSS“top”属性。例如：

.mycontent
{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	max-height: 510px;
	max-width: 594px;
	margin: 0 auto;
	background : #FFFFFF;
	background : rgba(255, 255, 255, 1);
	border-style : Solid;
	border-color : #000000;
	border-color : rgba(0, 0, 0, 1);
	border-width : 1px;
	border-radius : 35px;
	-moz-border-radius : 35px;
	-webkit-border-radius : 35px;
}

是否有在Microsoft Edge中使用它的解决方法？

Answer 1

我使用padding-top代替“ top”来设置其位置。完美的

.mycontent {

top: 50%;

}

到

.mycontent {

padding-top: 100px; 

}

Answer 2

我只是自己发现它，最好的（和工作方式）是使用jQuery。这里是正在运行的代码。

$(window).resize(function(){

	$('.mycontent').css({
		position:'absolute',
		left: ($(window).width() - $('.mycontent').outerWidth())/2,
		top: ($(window).height() - $('.mycontent').outerHeight())/2
	});

});

$(document).ready(function(){
    // To initially run the function:
$(window).resize();
});

.mycontent
{
	
	max-height: 510px;
	max-width: 594px;
	
	background : #FFFFFF;
	background : rgba(255, 255, 255, 1);
	border-style : Solid;
	border-color : #000000;
	border-color : rgba(0, 0, 0, 1);
	border-width : 1px;
	border-radius : 35px;
	-moz-border-radius : 10px;
	-webkit-border-radius : 10px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Seite im Aufbau</title>
<link rel="stylesheet" href="style/main.css">


</head>

<body>

<div class="mycontent">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  
  
</div>



</body>


</html>

Answer 3

好像是一个Edge bug / quirk。我通过在父元素上设置position: relative并在要垂直居中的孩子上设置position: absolute来修复此问题。

Answer 4

是的，这很烦人。我有同样的问题。用flex解决。对于该容器，请输入：

align-self:center

当然父母需要：

display: flex;
flex-direction: column;

Microsoft Edge中CSS“top”属性的解决方法？

4 个答案: