对齐问题：MacBook 上的 Safari 在屏幕的最右侧显示引导按钮答案

【问题标题】：Alignment issue : Safari on MacBook Showing bootstrap buttons on extreme right of the screen对齐问题：MacBook 上的 Safari 在屏幕的最右侧显示引导按钮
【发布时间】：2021-04-02 00:10:48
【问题描述】：

我刚刚在 safari 上查看了我的一个网站。它会使屏幕最右侧的按钮错位（100-200% 之间），从而在 Google Chrome 上正常工作时不必要地启用水平滚动。这是代码供参考。

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <meta content="width=device-width, initial-scale=1" name="viewport">

        <style>
                body {
                    background: linear-gradient(-15deg, #e77817 0%, #fff 20%, #fff 80%, #152d65 95%);
                }


            ::-webkit-scrollbar{
                width: 6px;
            }
            ::-webkit-scrollbar-track{
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb{
                background: #152d65;
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb:hover{
                background: #e77817;
            }

            #Logo{
                    width:27%;              
                    }                   
            h3{
                font-size:25px;
                font-weight:bold;
                font-family:'ElMessiri Regular', sans-serif;
                }
            
            .poly {
                margin-right: 2%;
                margin-top: 1%;
                width: 20%;
                font-size: 18px;
                font-family: "ElMessiri Regular";
            }

            
            #List {
                display: flex;
                justify-content: center;
            }
            a {
                text-decoration: none;
                color: white;
            }
            #plastic {
                background: #152d65;
            }
            #plastic:hover {
                color: #e77817;
            }
            #cares {
                background: #009534;
            }
            #cares:hover {
                color: #FFED00;
            }
            #medical {
                background: #e77817;
            }
            #medical:hover {
                color: #152d65;
            }
            
        </style>
    
    </head>
    
    <body>
        <center>
        <div id="Logo"> 
            <img src="Images/Logo.png" class="img-responsive" alt="aaaaaaa">    
        </div>      
        <div id="Company_Name">     
        <h3> ABC Pvt Ltd </h3>      
        </div>
        <br>        
        <div id="List" class="col-lg-12 container" style="height: 100%; width: 100%:">
            <a class="col-lg-2 poly btn"  id="plastic" href="aaa.html"><div>AAA</div></a>
            <a class="col-lg-2 poly btn"  id="cares" href="bbb.html"><div>BBB</div></a>
            <a class="col-lg-2 poly btn" id ="medical" href="ccc.html"><div>CCC</div></a>
            
        </div>
        </center>

该错误仅在 MacOS 上的 Safari 浏览器上发现。它在 iPhone 上运行良好。只有按钮会错位到屏幕的最右侧，而所有其他东西都保留在指定的位置。

【问题讨论】：

标签： html css macos button safari

【解决方案1】：

我从代码中删除了 display: flex 和 col-lg-* 并尝试运行它，它开始在适用于 MacBook 的 Safari 和 Chrome 上运行良好。

【讨论】：