时间戳

首页 > 解决方案 > 为什么在具有绝对位置的 flexbox 和元素的浏览器中会有不同的行为？

html - 为什么在具有绝对位置的 flexbox 和元素的浏览器中会有不同的行为？

问题描述

我真的为这个问题发疯了：

我想放置一个带有底部边框的圆圈，这样当具有移动视图（至少宽度为350 像素或更小）时，它会居中，但不会影响视图的边距。

我在 Angular 中进行的测试，但为了避免复杂性，我使用这个简单的 HTML 代码对其进行测试：

<html>
    <head>
        <title>Responsive Test</title>
    </head>
    <body>
        <style type="text/css">
        
            .home-circle-gray-bg {
                border-radius: 50%;
                border: 0.05rem dashed #000000;
                width: 530px;
                height: 530px;
                position: absolute;
                margin-top: 250px;
                background-color: transparent;
                right: 20%; 
                margin-left: 0px; 
                margin-right: 0px;
            }
            
            @media (max-width: 650px) {

                .home-circle-gray-bg {
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                }

            }
            
            .block {
                display: flex;
                flex-wrap: wrap;
                background-color: yellow;
            }
            
        </style>
        <div class="home-circle-gray-bg"></div>
        <div class="block">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </body>    
</html>

问题是什么？

我在 Firefox 中看到这个简单的代码，宽度分辨率为350px，屏幕底部出现水平滚动（实际上它出现得更早，我会说在530px，这是圆圈的宽度），包含文字的div根据分辨率进行适配，圆圈的左边部分是完美的，即不占空间而是在它的后面，好像是背景一样，缩小宽度的时候会变多在左边，我想在圆圈的右边也有同样的效果。

在此处输入图像描述

圆圈的右侧是问题，它似乎总是显示而不是向右移动更多（如左侧部分），直到它被隐藏或更少看到，我认为这是由“left：50％”引起的，但是我该如何解决这个问题呢？

在此处输入图像描述

在 Chrome 中测试相同的代码是完全不同的结果，圆圈会根据屏幕的宽度缩小。

  1. 为什么两个浏览器的结果不同？

  2. 是否有可能在两种浏览器中获得我想要的东西？

谢谢！

标签： htmlcsscss-positionresponsiveabsolute

解决方案

在互联网上进行了彻底搜索后，我找到了一个解决方案，并且在两种浏览器中都可以使用：Position:absolute 导致水平滚动条

HTML 代码：

<html>
    <head>
        <title>Responsive Test</title>
    </head>
    <body>
        <style type="text/css">
        
            .home-circle-gray-bg {
                border-radius: 50%;
                border: 0.05rem dashed #000000;
                width: 530px;
                height: 530px;
                position: absolute;
                margin-top: 250px;
                background-color: transparent;
                right: 20%; 
                margin-left: 0px; 
                margin-right: 0px;
            }
            
            @media (max-width: 650px) {

                .home-circle-gray-bg {
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                }

            }
            
            .block {
                display: flex;
                flex-wrap: wrap;
                background-color: yellow;
            }
            
            .wrapper {
                width: 100%;
                position: relative;
                overflow: hidden;
                height: 100%;
            }
            
        </style>
        <div class="wrapper">
            <div class="home-circle-gray-bg"></div>
            <div class="block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </body>    
</html>

Firefox 和 Chrome 中的行为相同。

推荐阅读