如果浏览器狩猎,则更改div css样式

时间:2022-10-24 23:57:57

I have the following div:

我有以下div:

<div id="views" style="margin-top:34px; margin-left:35px;">

// code...

</div>

this works perfect for me in all explorers but in safari in order to work perfect I need to set margin-top: -40 px; Any idea which is the easiest way to do this? I mean to make is select browser and if safari to apply margin-top: -40 px;

这对所有探险家来说都是完美的,但在野生动物园中为了完美工作我需要设置margin-top:-40 px;有什么想法是最简单的方法吗?我的意思是选择浏览器,如果safari应用margin-top:-40 px;

2 个解决方案

#1


0  

  1. Take out your inline styles.
  2. 取出你的内联样式。

  3. Detect the browser by JavaScript, add a class of .safari to the body tag if Safari is detected, then have your general and Safari specific styles like this:
  4. 通过JavaScript检测浏览器,如果检测到Safari,则在body标签中添加一类.safari,然后使用如下所示的常规和Safari特定样式:

CSS:

#views {
    margin-top:34px;
    margin-left:35px;
}

.safari #views {
    margin-top:-40px;
    margin-left:35px;
}

Safari styles will be applied to Safari due to higher CSS specificity.

由于更高的CSS特异性,Safari样式将应用于Safari。

#2


1  

You could try to set specific vendor prefixes (although chrome and safari are both webkit) this way you could set different styles for different browsers.

您可以尝试设置特定的供应商前缀(虽然chrome和safari都是webkit),这样您就可以为不同的浏览器设置不同的样式。

Vender Specific Prefix

供应商特定前缀

Or the much more difficult way... detecting the browser and assigning CSS

或者更困难的方式......检测浏览器并分配CSS

Browser Detection

You should post some code though, I feel this problem your having could be avoided in a much more graceful manner.

你应该发布一些代码,我觉得这个问题可以以更加优雅的方式避免。

#1


0  

  1. Take out your inline styles.
  2. 取出你的内联样式。

  3. Detect the browser by JavaScript, add a class of .safari to the body tag if Safari is detected, then have your general and Safari specific styles like this:
  4. 通过JavaScript检测浏览器,如果检测到Safari,则在body标签中添加一类.safari,然后使用如下所示的常规和Safari特定样式:

CSS:

#views {
    margin-top:34px;
    margin-left:35px;
}

.safari #views {
    margin-top:-40px;
    margin-left:35px;
}

Safari styles will be applied to Safari due to higher CSS specificity.

由于更高的CSS特异性,Safari样式将应用于Safari。

#2


1  

You could try to set specific vendor prefixes (although chrome and safari are both webkit) this way you could set different styles for different browsers.

您可以尝试设置特定的供应商前缀(虽然chrome和safari都是webkit),这样您就可以为不同的浏览器设置不同的样式。

Vender Specific Prefix

供应商特定前缀

Or the much more difficult way... detecting the browser and assigning CSS

或者更困难的方式......检测浏览器并分配CSS

Browser Detection

You should post some code though, I feel this problem your having could be avoided in a much more graceful manner.

你应该发布一些代码,我觉得这个问题可以以更加优雅的方式避免。