我在浏览有关高级响应式设计的在线课程的问答部分时遇到了这个问题。我找到了答案，分享了它，并决定在这里发布它，以防其他人可能有同样的困境。
难题在于，如果我们可以为某些行为与大多数浏览器不同的浏览器定义不同的样式，那么确保浏览器兼容性会容易得多，例如Internet Explorer，至少我的网站是 Safari。
那么我们该如何做呢？在下面查看我的答案以找出答案，如果您认为自己知道一种更好的方法来针对特定浏览器进行特定的媒体查询，请随时做出贡献。
【问题讨论】：
标签： css responsive-design cross-browser media-queries compatibility
使用 caniuse (https://caniuse.com/)，查找仅受您要定位的特定浏览器支持的特定属性。然后，使用@support 查询，使用您发现的属性定位该浏览器是它独有的。然后，您在该查询中应用的任何样式都将仅适用于支持您定义查询的属性的浏览器。
也就是说，@support 查询括号内的属性用于定义何时——对于哪些浏览器——花括号内的样式将适用；它们不需要相同，也就是说，您不需要使用花括号中样式相同的属性来定义括号中的查询，因此您可以选择针对您想要的特定浏览器的任何属性显示样式。
更新：
我发现这个网站似乎提供了针对特定浏览器和 caniuse 样式的浏览器版本的解决方案，让您无需手动测试每个属性：
本文简要介绍了如何使用它：
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
更新：
仅适用于 Internet Explorer，仅适用于旧版本，您可以创建单独的样式表以使用 HTML 中的条件 cmets 为它们加载。这可以是您的通用样式表的副本，经过调整以适用于旧 IE 版本，但仅在检测到这些版本时才加载，因此不会干扰其他浏览器上的显示。不幸的是，它们不能用于其他浏览器。本文介绍了如何使用条件语句。
https://www.quirksmode.org/css/condcom.html
更新：
在我看来，对这个问题最有效的解决方案是实现一些 javascript 来检测浏览器版本，然后应用特定样式，甚至根据您的目标浏览器修改 DOM。
这很好地解释了原理和一些应用：
Is there any equivalent to IE conditional comment for chrome and safari?
这个，如果相当老，仍然是一个非常有用的应用程序：
http://rafael.adm.br/css_browser_selector/
就是这样！确保浏览器与大多数浏览器兼容的能力！
【讨论】：