/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
查看 BrowserHacks.com 获取更多信息。
IE8
好吧……也许只是我……但我不知道我是否理解这段代码。有人愿意解释一下吗?
您好,就像 Chris 一样,我也想了解这段代码的功能?
谢谢 :)
请问有人能解释一下这段代码的功能吗?我的意思是,我有点困惑……但我发现它很有趣……请有人能详细地解释一下吗?
我认为它解释了如何进行浏览器特定 CSS 规则。例如,如果你想让 IE6 中元素的背景为红色,你可以使用第一个选择器并进行操作。
它没有正常工作。请添加演示页面。
它正在工作,但应该遵循层次结构。
感谢 Sanjay 的解决方案。如何与 !important 一起使用?
/* 仅适用于 IE 8 */
.header{border:#000 solid 5px /;
我无法为 IE8 提交正确的代码。
/* Safari */
html[xmlns*=””] body:last-child .yourclass { }
这在 Safari 中不起作用。我需要一个可以区分 WebKit 和 Chrome 的过滤器。
非常酷,感谢分享。你可以将其定向到外部样式表,还是必须嵌入?
我使用这些技巧来定位特定的 IE 版本
color : green; /* IE9 及以下 */
color : green\9; /* IE8 及以下 */
*color : yellow; /* IE7 及以下 */
_color : orange; /* IE6 */
但 W3C 验证不会验证我给出的 IE 目标 CSS,例如
color:green\9;
为什么在每一行上使用技巧?
如果你有一个复杂的集成,请使用带特定 div ID 的条件注释。
例如,如果你想定位 IE7
你的内容
此处不同的语法:http://www.quirksmode.org/css/condcom.html
仅 Chrome 技巧
仅 Firefox 技巧
IE8 技巧
IE9 技巧
coloe:red\9; 技巧在 IE9 中有效
非常感谢,它在 IE 中运行良好,并且没有影响其他浏览器,非常感谢。
我不是完全的 CSS 技巧狂热者,我更喜欢设计和开发简单但有效的网站,而不是使用花哨但充满 CSS 技巧的网站,有一天,新版本的浏览器将不再采用这种脚本。
IE8 技巧也在 IE9 中有效
:(有没有只适用于 IE8 及以下版本的完美技巧?
IE8 技巧有效
@media screen {
.item {
background: #000;
}
}
缺少“screen”前面的“/”
更正:缺少“screen”前面的“斜线”
嗨,
请帮我解决 Google Chrome 专属 CSS 技巧。我在 Google Chrome 中遇到了 @font-face 问题。我只需要单独 hack Google Chrome 以使其为“Arial”。
谢谢
Anil
要仅在 Chrome 或 Safari 中运行,请尝试我在 Stackoverflow – 是否有 Google Chrome 专属 CSS 技巧? 中的答案。
IE9 另一个技巧(对我有用)
您好,
多年来,我不停地问自己同一个问题
“浏览器构建者什么时候会坐下来一起开始构建无需所有这些令人讨厌的差异就能正常工作的浏览器?!”
醒醒,你们,做你们该做的事。
负起责任,让我们摆脱这些垃圾!
顺便说一句
非常感谢所有努力纠正浏览器构建者错误的人!
致敬。
html[xmlns] .clearfix {
display: block;
}
您好,这个技巧适用于哪个浏览器和版本?:D
嗨,
我想要 Android CSS 技巧解决方案,请提供技巧 CSS。对我而言……拜托…………
太棒了!
我似乎无法纠正 Chrome 元素,而不会破坏 Safari 元素。可用的 Chrome 独占技巧没有任何区别。
你可以阅读更多关于浏览器特定选择器和属性技巧的内容,这些内容对我有很大帮助,所以只是分享一下。谢谢!
选择器技巧
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-1/
属性技巧
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-2/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.ar #form-wrapper {
width: 330px;
}
}
上面的技巧适用于 Safari 和 Chrome,我只想要 Chrome,如果你知道,请告诉我。
有没有单独的 Chrome 技巧和单独的 Safari 技巧?
太棒了,
我现在已经解决了所有浏览器问题……
谢谢。
@anil,
如果你想为 Chrome 和 Safari 创建单独的样式,可以使用带浏览器检测功能的单独 CSS。对于你的问题,由于这两个浏览器都在使用同一个 Webkit 浏览器引擎,因此这可能是不可能的。恕不赘述。
更多浏览器黑客技巧,请访问 BrowserHacks。
\9 黑客技巧适用于 IE9 及以下版本。我只想要 IE8 及以下版本。你的信息不正确。请更新它…… 谢谢。
大家好,
这里有人可以帮我解决我的文件选择器按钮颜色在手机/iPhone 上显示的问题吗?
http://www.jotformpro.com/form/31846176706965
我使用了一些自定义 CSS 来将颜色从原来的蓝色更改为绿色,但它不起作用。
这是我注入到此表单中的 CSS。
.filePicker-button {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
.filePicker-button:hover {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
你能帮我吗?
谢谢,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
safari css 黑客技巧
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 仅 Safari 覆盖 */
::i-block-chrome, .wrapper th > p span {
position: relative;
}
}
谢谢,它对我来说运行良好 :)
这仅适用于 Safari。谢谢。
@media screen and (-webkit-min-device-pixel-ratio:0)
在 Mac 版 Chrome v31 中不再起作用(不确定在哪个版本停止工作)。其中许多都缺少表明它们在 IE10+ 中有效的指示。黑客技巧仍然与 IE 的较新版本相关,因为即使 IE11 也有自己的主要怪癖(例如,它固定嵌套元素的位置)。
我也会将这些添加到集合中 ;) – CSS 黑客技巧:Firefox、Opera、Safari 和 Internet Explorer
嗨,Chris,
我找到了代码,它在“iPad|iPhone|iPod|android”设备上运行,我在我的 bigcommerce 网站 “http://cancooker.com/” 上使用了此代码,你可以在上面看到结果。
这是我选择代码的网站。
https://gist.github.com/jsoverson/4963116#file-device-js
谢谢!
Sam
看看:https://github.com/tarunsharma20/initiator
以下 CSS 在 IE 8 中不起作用,如果有什么问题请告诉我
$(“ul.dynamic”).css(‘margin-top/*/’,’30px\9′);
谢谢
Bhaskar
刚刚发现这个针对 Chrome 的特定黑客技巧!因为 Mac 上的 Webkit 有时会使字体变细 - 但在视网膜显示屏上,较细的字体看起来很正常!
至少我没有使用它,因为我使用了正常的 Chrome 和 Safari 黑客技巧,并在后来覆盖了视网膜显示屏!
有人知道如何让媒体查询在 iPhone 5/5s 上工作吗?
我的媒体查询在所有设备上都正常工作,除了 iPhone 5 和 iPhone 5s。
你需要写这个
@Johann,
谢谢你的代码段。我使用的是移动优先和 em,但我将尝试一下。
由于 IE 10 和 11 中的一个错误,我需要对它们进行一些特定的 CSS 调整。这通常是我查找此类黑客技巧的地方,但这里没有列出。
以下是如何做到的。我希望你考虑将它添加到你的列表中
@Nik
太棒了,非常感谢。现在需要更新本指南,因为 IE:10+ 不再支持指南中的所有代码。惊讶我不得不去评论中寻找解决方案。
不错,谢谢分享
很棒,不过那篇文章已经很老了,但它还是有帮助的 :)
对我来说,我通常使用这些黑客技巧..
嘿,我和我的朋友在争论。我说“我非常确定 \9 黑客技巧就叫做“斜杠黑客技巧””,但她认为它有不同的名字。你不清楚它叫什么名字吗?干杯 :)
p{
border-color: blue \ ;
}
仅适用于 Internet Explorer 8
我在网页上使用了 HelveticaNeueLTStdCn 字体,它在除了 Safari 浏览器之外的所有浏览器中都很酷。这就是为什么我需要在 Safari 浏览器中使用不同的字体系列。
你是否知道如何编写仅限 Safari 浏览器的 CSS 代码...
此页面可能会有帮助:http://browserhacks.com/.