css定位和浏览器兼容性 |光圈走动css

.container{
/* 相对定位 */
position: relative;
}
.box{
/* 绝对定位 */
position: absolute;
top: 20px;
left: 50px;
}
.header{
/* 固定定位 */
position: fixed;
top: 0;
left: 0;
width: 100%;
}

但是，在实际运用中，大家还需要注意到浏览器兼容性问题。不同浏览器对CSS属性的解析方式可能不同，导致同一份代码在不同浏览器下显示效果不同，甚至出现兼容性问题。为了避免这种情况的发生，大家需要使用CSS前缀。

.box{
/* 不同的浏览器需要不同的前缀 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

除了CSS前缀外，大家还可以使用CSS hack的方式进行兼容性处理。CSS hack是一种针对不同浏览器或不同版本之间的差异所采用的技术手段，通过识别不同浏览器或不同版本之间的特殊标识，从而实现样式效果上的差异化处理。

/* IE6下特殊处理 */
*html .box{
font-size: 24px;
}

但是，大家应该谨慎使用CSS hack。因为CSS hack可能导致代码可读性降低、维护成本增加、易被识别为恶意代码等问题，建议在一定前提下使用，比如在针对某个浏览器或特定环境时，回避全局性使用hack的情况。