Question

我试图在Internet Explorer和Microsoft Edge的中心屏幕上移动hr，但它已移至右侧。

Internet Explorer

Google Chrome

HTML

<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
    <hr style="
    width: 80%;
    height: auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
">
</div>

此外，为什么在Internet Explorer中滚动显示

Answer 1

不要相对定位，而是这样做：

<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
    <hr style="
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
">
</div>

要垂直对齐，可以给div display: flex，flex-direction: column和justify-content: center，但是通常不需要垂直对齐hr。而是在顶部和底部留出一定的边距。

Answer 2

您应该考虑正常的转换属性（对于旧的浏览器，则为-ms）

-moz-transform:    translate(-50%, -50%);
-o-transform:      translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

，对于滚动条，尝试添加

@-ms-viewport { width: device-width; }
overflow-y: hidden;

更新：所以我做了三件事：

添加溢出：隐藏；到div
将100vh更改为100％
左移：50％；左：40％；

为什么HR标签不在Internet Explorer和Microsoft Edge浏览器上的中间屏幕

2 个答案: