添加<!DOCTYPE html>声明后Tweet按钮CSS样式失效问题

数据老陈

2026-8-27

问题根因

添加<!DOCTYPE html>声明后浏览器会切换到标准渲染模式，严格遵循W3C规范解析代码：CSS类选择器是大小写敏感的，你代码里HTML元素的class值和CSS选择器的类名大小写不一致，导致样式匹配失败：

HTML中Tweet按钮的class属性写的是Tweetb（首字母大写T）
CSS中对应的选择器写的是.tweetb（首字母小写t）

未添加DOCTYPE时浏览器会运行在怪异（Quirks）模式，该模式下部分浏览器对CSS类名匹配不做大小写校验，所以样式可以正常显示，切换标准模式后这个非标准兼容逻辑被移除，样式就直接失效了。

修复方案

只需要保证HTML里的class值和CSS选择器的类名大小写完全统一即可，两种修改方式二选一：

方案1：修改HTML代码，把按钮的class改为和CSS一致的小写开头：

<button class="tweetb">Tweet</button>

方案2：修改CSS代码，把选择器改为和HTML一致的大写开头：

.Tweetb {
    background-color: rgb(29, 155, 240);
    color: white;
    border: none;
    height: 36px;
    width: 74px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-left: 8px;
    transition: box-shadow 0.15s;
    vertical-align: top;
}

.Tweetb:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}