Css Chrome和Safari中左右0分辨率不同的绝对定位元素？_Css

Css Chrome和Safari中左右0分辨率不同的绝对定位元素？

css

Css Chrome和Safari中左右0分辨率不同的绝对定位元素？,css,Css,我创建了一个简单的示例来展示将left和right设置为0的绝对定位元素的想法，但在最新的Chrome和Safari中会产生截然不同的结果。根据对问答的评论，我认为它将根据在中概述的方式持续工作，但事实并非如此。为什么会这样我知道设置一个特定的宽度可以解决问题，但是1）为什么跨浏览器存在差异，2）有没有比指定显式宽度更好的居中方法 <html lang="en"> <head> <meta charset="UTF-8"> &

我创建了一个简单的示例来展示将

left

和

right

设置为

的绝对定位元素的想法，但在最新的Chrome和Safari中会产生截然不同的结果。根据对问答的评论，我认为它将根据在中概述的方式持续工作，但事实并非如此。为什么会这样

我知道设置一个特定的宽度可以解决问题，但是1）为什么跨浏览器存在差异，2）有没有比指定显式宽度更好的居中方法

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         .vis {
         width: 100%;
         position: relative;
         }
         .btn {
         position: absolute;
         left: 0;
         right: 0;
         margin:auto;
         display:block;
         }
      </style>
      <title>Document</title>
   </head>
   <body>
      <div class="vis">
         <button class="btn">Test!</button>
      </div>
   </body>
</html>


维斯先生{
宽度：100%；
位置：相对位置；
}
.btn{
位置：绝对位置；
左：0；
右：0；
保证金：自动；
显示：块；
}
文件
测试！

狩猎：

铬：

因为您使用的是按钮元素，它是一种特殊元素。如果您使用div或span，您将看到相同的行为（最后一个），button元素本身是否有使其特殊的属性？我想，也许更改为块级元素可以修复它，使其行为类似于

div

，但正如示例中所示，它没有改变。按钮本身的概念是一种特殊的东西。这有点棘手，但你不能做你想要的按钮。例如，您不能根据需要更改显示：/