Chrome CSS Hack 和媒体查询 [关闭]答案

【问题标题】：Chrome CSS Hack and Media Queries [closed]Chrome CSS Hack 和媒体查询 [关闭]
【发布时间】：2012-07-16 13:56:33
【问题描述】：

我想创建一个响应式网站，但到目前为止我的尝试在 chrome 中存在一些问题。现在的问题 - 在 chrome css hack 中插入媒体查询？

@media 屏幕和 (-webkit-min-device-pixel-ratio:0) {

#myid {位置：绝对；顶部：10 像素；}


@media only screen and (max-width: 1024px) {

#myid {位置：绝对；顶部：8px；}

}

}

仅在 css 中需要它，所以不需要 javascript 或 php。有人知道如何解决这个问题吗？

【问题讨论】：

哇，不客气！！！感谢您非常专业的回答....您真的认为我还没有尝试过解决 chrome 的问题吗？为什么我会在这里问...
询问您的问题，而不是your attempt to solve your problem。顺便说一句，你不能嵌套这样的媒体查询。但是，您可以将 hack 媒体查询和其他媒体查询合并为一个...
你到底有什么问题？
我已经通过@font-face 添加了一种字体，它在 chrome 和 ie 中呈现不同。所有的行高都被“破坏”了，所以我使用了 hack。现在的问题是响应式网站与黑客和媒体查询相结合。
@Alex：聪明的 alec cmets 不会让人帮你。

标签： css google-chrome

【解决方案1】：

你想听到的答案，我在评论中暗示，是：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #myid {position: absolute; top: 10px;}
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1024px) {
    #myid {position: absolute; top: 8px;}
}

尽我所能解决您的根本问题......

我通过@font-face 添加了一个字体，它在铬和即。所有行高都被“破坏”了，所以我使用了 hack。

【讨论】：

不幸的是，此媒体查询现在也针对 Firefox。
@ShashankBhatt：没有什么不幸的，这是一个非常谨慎的决定。查看这些 Firefox 错误 here 和 here。 2020 年你不应该需要“仅限 Chrome 的 CSS hack”。就像我在 2012 年问那个人一样......你的根本问题是什么？为什么需要这个？
@thirtydots 我需要这个，因为图标对齐方式并不完全处于圆形中心，仅适用于 chrome 和 FF，它显示为居中。到目前为止，我已经使用了 CSS 以外的所有居中方法，我并不是说垂直居中，但问题在于水平居中。只有 1px 的问题，但我的测试人员给了我。