Joh*_*han 10 html css safari stylesheet
我正在建立一个网站,但Chrome和其他浏览器中的元素需要保证金,但在safari中则不然.所以我想添加一个css行来修复它,但我找不到任何方法只为safari 3+添加css.
use*_*076 12
我相信这应该有效
小提琴:http://jsfiddle.net/kHFjM/1/
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent .indexOf('safari')!=-1){
if(userAgent .indexOf('chrome') > -1){
//browser is chrome
}else if((userAgent .indexOf('opera') > -1)||(userAgent .indexOf('opr') > -1)){
//browser is opera
}else{
//browser is safari, add css
}
}
这是检测浏览器版本/sf/answers/414315401/的链接
jQuery集成解决方案:
<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
$("body").addClass("safari");
}
});
</script>
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
纯JS集成解决方案:
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
<body>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
小智 8
这是不可能的,因为您也将相同的属性应用于Chrome.Chrome和Safari都使用-webkit-前缀.
但你可以用PHP做到这一点.
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
用您自己的样式表替换safari.css.感谢@theorise
在 safari 9.0（仅，不是> 9.0）中，您现在可以使用这个不错的 hack 在 CSS 中完成。您不需要任何 JS 代码。我做到了，对我来说效果很好。使用这个黑客：
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}
它工作的原因是：Safari 9.0 及更高版本具有功能检测。因此，通过检测专用于 Safari 的功能，您可以检测到 Safari。overflow:-webkit-marquee 和 justify-content:inherit 专用于 safari。这就是为什么我们可以通过这个简单的 CSS hack 来检测 safari。
这对我来说适用于新旧 Safari 浏览器：
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance: none) {
/* Safari Only CSS here */
}
}