V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 666 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在 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

2023-01-27 16:54:48 +08:00

检查你安装的插件

bojackhorseman

2023-01-28 13:07:33 +08:00 via iPhone

我注意到 edge 浏览器会在 css 调试栏里显示某个属性不生效标识及其原因，不知道是不是 chromium 系列浏览器会自动把无效属性去掉？

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

css

html