为 webkit/IE 指定 CSS,无需单独的 CSS

发布于 2024-12-07 03:15:50 字数 175 浏览 0 评论 0原文

对于 IE,我可以使用这个:

.content {
   *padding: 10px;
   padding: 10px
}

通过这样做,*-部分将仅用于 IE。 webkit 浏览器也有类似的技巧吗? (不让他们为 webkit 浏览器调用特殊的 .css 吗?)

For IE I can use this:

.content {
   *padding: 10px;
   padding: 10px
}

By doing so, the *-part will only be used for IE. Is there a tric like this for webkit browsers too? (Whitout having them called to a special .css for webkit browsers?)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

花间憩 2024-12-14 03:15:51

对于基于 webkit 的浏览器来说,没有这样的 hack。但是,您可以使用以下方法实现这样的效果(在多个浏览器中):

<script>
(function(){ //anonymous function to prevent leaking
  var d = document.createElement("div");
  d.style.cssText = "-webkit-border-radius:1px;"; // webkit, such as Chrome/Safari
  if(/webkit/i.test(d.style.cssText)){
      var style = document.createElement("style");
      style.src = "webkit-only.css";
      document.getElementsByTagName("head")[0].appendChild(style);
  }
})();
</script>

此解决方案背后的关键是浏览器会忽略未知的 CSS 声明。 -webkit- 前缀仅在基于 webkit 的浏览器中可用。

同样,以下前缀可用于检测其他浏览器引擎:

  • -moz-border-radius:1px; - Gecko,例如 Firefox -o-border-radius:0;-o-border-radius:1px; - Gecko,例如 Firefox
  • -o-border-radius:0; - Opera
  • -ms-border-radius:0; - Trident,例如 Internet Explorer

您的用户可能使用的是不支持 border-radius,但由于 Chrome 通常是保持最新(自动更新),webkit 解决方案应该始终有效。

There's not such a hack for webkit-based browsers. However, you can achieve such an effect (in multiple browsers) using:

<script>
(function(){ //anonymous function to prevent leaking
  var d = document.createElement("div");
  d.style.cssText = "-webkit-border-radius:1px;"; // webkit, such as Chrome/Safari
  if(/webkit/i.test(d.style.cssText)){
      var style = document.createElement("style");
      style.src = "webkit-only.css";
      document.getElementsByTagName("head")[0].appendChild(style);
  }
})();
</script>

The key behind this solution is that unknown CSS declarations are ignored by a browser. The -webkit- prefix will only be available in webkit-based browsers.

Similarly, the following prefixes can be used to detect other browser engines:

  • -moz-border-radius:1px; - Gecko, such as Firefox
  • -o-border-radius:0; - Opera
  • -ms-border-radius:0; - Trident, such as Internet Explorer

There's a chance that your user has an ancient browser which don't support border-radius, but since Chrome is usually kept up-to-date (auto-update), the webkit solution should always work.

记忆消瘦 2024-12-14 03:15:51

找到了一个不错的黑客。乍一看似乎有效:)

@media screen and (-webkit-min-device-pixel-ratio:0) {
     div.panel-homepage div#plan-build-operate div.panel-pane ul.links a { padding-top: 20px;}
}

Found a decent hack. Seems to work at first sight :)

@media screen and (-webkit-min-device-pixel-ratio:0) {
     div.panel-homepage div#plan-build-operate div.panel-pane ul.links a { padding-top: 20px;}
}
枫以 2024-12-14 03:15:51

如果您使用 PHP,则有一个函数调用:

get_browser()

检查:http://php.net/manual/fr/function.get-browser.php

该函数返回有关客户端浏览器的所有信息的数组。
将这些信息作为 CSS 类添加到您的 body 标记中。

您将能够定位特定的浏览器,而无需使用 CSS hack 和
拥有有效的 CSS 代码。

祝你好运!

If you work with PHP, there is a function call :

get_browser()

check at : http://php.net/manual/fr/function.get-browser.php

This function returns an array of all the information about the client browser.
Add these informations as CSS class in your body tag.

You will be able to target specific browser without using CSS hack and
have a valid CSS code.

Good luck!

时光清浅 2024-12-14 03:15:51

使用以下内容来定位 Webkit:

x:-webkit-any-link { padding: 10px; }

如果您需要支持 IE7,请添加以下内容以过滤此规则,使其不适用:

 * > /**/ .content, x:-webkit-any-link { padding: 10px; }

Use the following to target Webkit:

x:-webkit-any-link { padding: 10px; }

If you need to support IE7, add the following to filter this rule from applying to it:

 * > /**/ .content, x:-webkit-any-link { padding: 10px; }
霞映澄塘 2024-12-14 03:15:50

对于那些没有安装扩展的人,我找到了一种新方法,而不是使用 get_browser() 。这种新方法是使用 HTACCESS 来代替。您需要安装模块“mod_setenvif”。

这是您需要放入 .htaccess 文件中的代码。
它是 HTTP_USER_AGENT 服务器变量的正则表达式。如果匹配,我们将创建一个 USER_AGENT 变量来存储匹配的浏览器名称。

<IfModule mod_setenvif.c>
BrowserMatch "Mozilla" USER_AGENT=firefox
BrowserMatch "Safari" USER_AGENT=safari
BrowserMatch "Chrome" USER_AGENT=chrome
BrowserMatch "MSIE" USER_AGENT=ie
</IfModule>

然后,您可以在 PHP 代码中使用新的服务器变量。

<body class="<?php echo $_SERVER['USER_AGENT'];?>">

祝你有美好的一天。

I found a new way instead of using get_browser() for those who doesn't have the extension installed. This new way is by using HTACCESS instead. You need the module "mod_setenvif" installed.

Here is the code you need to put in the .htaccess file.
It's a regexp over the HTTP_USER_AGENT server variable. If it matches, we create a USER_AGENT variable to store the matching browser name.

<IfModule mod_setenvif.c>
BrowserMatch "Mozilla" USER_AGENT=firefox
BrowserMatch "Safari" USER_AGENT=safari
BrowserMatch "Chrome" USER_AGENT=chrome
BrowserMatch "MSIE" USER_AGENT=ie
</IfModule>

Then, you can use the new server variable in your PHP code.

<body class="<?php echo $_SERVER['USER_AGENT'];?>">

Have a good day.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文