css兼容模式错位 |滚动条纯css控制

icon css大小，css 加载华文行楷，css绘制倾斜的矩形，css导入样式的方式，css商品左上角浮动，css3之类的书，滚动条纯css控制 css兼容模式错位 |滚动条纯css控制

.box {
width: 300px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px;
}

上面的代码是一个简单的盒子样式，在标准模式下表现正常。但是，当浏览器处于兼容模式时，会出现与期望不符的效果。

兼容模式下的错位问题.box {
width: 300px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px;
}兼容模式下的盒子

在兼容模式下，上面的盒子会出现偏移的情况。这是因为在兼容模式下，浏览器会按照旧版本的渲染方式来解析页面，与新版本的规范有所不同。

为了避免这种问题，大家可以在HTML文档中声明使用的DOCTYPE，告诉浏览器大家要使用哪个规范。

使用DOCTYPE声明规范.box {
width: 300px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px;
}使用DOCTYPE声明规范

在声明了DOCTYPE后，浏览器会按照该规范来解析页面，从而消除兼容模式下的问题。因此，在写CSS样式时，大家要注意规范的使用，以避免出现奇怪的错位等问题。