V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
woshichuanqilz
V2EX  ›  问与答

Chrome 调试页面会把 text-align 属性去掉 firefox 不会这样如何解决?

  •  
  •   woshichuanqilz · 2023-01-27 13:50:51 +08:00 · 606 次点击
    这是一个创建于 426 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在 chrome 里面调试, text-align 会被 user agent stylesheet 给去掉, 在匿名浏览页面也是这个情况, 但是在 firefox 里面 align 是可以的, 这个是为什么?

    代码 text-align center 在 btn span 里面

    css

    body{
        min-height: 100vh;
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    
    /* button */
    .btn {
        width: 100px;
        height: 20px;
        border: none;
        position: relative;
        background-color: aqua;
    }
    
    .btn::after, .btn::before, .btn span::after, .btn span::before {
        transition: all 0.3s ease;
    }
    
    .btn span{
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        /* position: relative; */
    }
    
    .btn::after, .btn::before {
        content: "";
        /* bottom: 0; */
        /* 修改这个就能影响生长方向 */
        position: absolute;
        top: 0;
        right: 0;
        background-color: white;
        z-index: 2;
    }
    
    
    
    .btn span::after, .btn span::before {
        content: "";
        position: absolute;
        /* top: 0; */
        /* 修改这个就能影响生长方向 */
        bottom: 0;
        left: 0;
        background-color: white;
        z-index: 2;
    }
    
    
    .btn::after, .btn span::after {
        width: 0%;
        height: 2px;
    }
    
    .btn::before, .btn span::before{
        width: 2px;
        height: 0%;
    }
    
    .btn:hover::before, .btn span:hover::before{
        height: 100%;
    }
    
    .btn:hover::after, .btn span:hover::after{
        width: 100%;
    }
    

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- style file -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- button with a span in it -->
        <button class="btn">
            <span>Ori</span>
        </button>
    </body>
    </html>
    
    2 条回复    2023-01-28 13:07:33 +08:00
    Rache1
        1
    Rache1  
       2023-01-27 16:54:48 +08:00
    检查你安装的插件
    bojackhorseman
        2
    bojackhorseman  
       2023-01-28 13:07:33 +08:00 via iPhone
    我注意到 edge 浏览器会在 css 调试栏里显示某个属性不生效标识及其原因,不知道是不是 chromium 系列浏览器会自动把无效属性去掉?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5908 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:40 · PVG 10:40 · LAX 19:40 · JFK 22:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.