如何通过Media Queries针对特定浏览器设置样式

嘿，这个问题我之前做项目时也碰到过！做响应式设计时，IE、Safari这些特立独行的浏览器总能给我们带来小插曲，用媒体查询针对性写样式确实是提升兼容性的实用技巧。我整理了几个亲测有效的方案，分享给你：

一、针对Internet Explorer（IE）的媒体查询 #

1. IE10和IE11 #

这两个版本可以利用IE独有的-ms-high-contrast属性精准匹配，其他浏览器不会识别这个规则：

/* IE10+专属样式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .your-target-element {
    /* 这里写IE专属的样式调整，比如修复布局偏移、字体问题 */
    padding: 10px 8px;
    font-size: 16px;
  }
}

2. 旧版IE（IE9及以下） #

IE9及以下对媒体查询的支持有限，如果一定要用媒体查询适配，可以试试这个（兼容性稍弱，更推荐结合HTML条件注释加载单独样式表）：

/* IE9及以下专属样式 */
@media screen and (min-width:0\0) {
  .your-target-element {
    border: 1px solid #e0e0e0;
  }
}

二、针对Safari浏览器的媒体查询 #

Safari不管是桌面端还是移动端，都可以通过WebKit专属属性结合媒体查询定位，这个方法能避开Chrome等其他WebKit内核浏览器：

/* Safari 10.1+专属样式 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .your-target-element {
      /* Safari下的样式调整，比如修复字体渲染、按钮样式 */
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
  }
}

如果是针对移动端Safari，还可以结合设备方向等条件细化规则：

/* 移动端Safari横屏模式专属样式 */
@media screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  @supports (-webkit-appearance:none) {
    .mobile-header {
      height: 60px;
      padding: 0 15px;
    }
  }
}

三、小提示 #

• 优先用标准CSS写法解决问题，只有当标准写法在特定浏览器失效时，再用这些专属样式方案，避免过度依赖。
• 测试时一定要在目标浏览器里验证，不同版本的浏览器可能存在细微差异。

内容的提问来源于stack exchange，提问作者Sebastian Neferu