V2EX = way to explore

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

已注册用户请登录

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

我在 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 年 1 月 27 日

检查你安装的插件

dumbass

2023 年 1 月 28 日 via iPhone

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

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

css

html