淘先锋技术网

首页 1 2 3 4 5 6 7

随着苹果系统的普及,越来越多的网站需要进行苹果系统的css样式兼容性处理。苹果系统的浏览器Safari和iOS中的Safari都是基于WebKit内核开发的,与其他浏览器在渲染页面上存在一些差别。下面我们来看一些常见的问题以及解决方案。

1. Border-radius

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

在Safari浏览器中使用-webkit-border-radius属性,而在Firefox等浏览器中使用-moz-border-radius属性。当然,为了兼容所有的浏览器,最好还是再加上标准的border-radius属性

2. Box-shadow

-webkit-box-shadow: 2px 2px 10px #ccc;
-moz-box-shadow: 2px 2px 10px #ccc;
box-shadow: 2px 2px 10px #ccc;

同样的,box-shadow属性在不同的浏览器中是不同的。在Safari浏览器中使用-webkit-box-shadow属性,在Firefox浏览器中使用-moz-box-shadow属性,标准属性可以不加。

3. Transparent

background-color: rgba(255, 255, 255, 0.5);

透明度在Safari浏览器中使用rgba属性,而在Internet Explorer和Firefox中使用filter:alpha(opacity=50)和opacity:0.5。使用rgba属性可以做到透明度效果并兼容Safari浏览器。

4. 文本垂直居中

.container {
display: table-cell;
vertical-align: middle;
}
.container span {
outline: none;
}

在处理文本垂直居中的时候,可以使用display:table-cell和vertical-align属性实现这个效果。当然,如果这里使用了outline属性,需要将它的值设置为none,否则在Safari浏览器中会有一些奇怪的边框出现。

总之,在进行苹果系统的样式兼容性处理时,需要多花些时间来处理不同浏览器之间的差异,但是这是为了更好的用户体验而必要的。