如何仅对 IE 应用 css 样式

Question

我正在尝试解决我的网站在 Internet Explorer 中的显示方式所遇到的问题。在搜索互联网时，我发现了以下代码，以便仅对 IE 应用 CSS 样式。我附上了 2 张图片，其中 1 张是 IE 中的网站（电话号码，菜单显示不正确），第 2 张是 Firefox 中的网站以及它应该如何显示。

我目前正在浏览该网站以尝试解决这些问题，但希望得到一些建议，以确保我应用了正确的代码，以便在所有 IE 版本中正确显示并且不会弄乱浏览器。

理想情况下需要一些帮助才能正确显示菜单和电话号码。目前我已将以下代码应用到我的样式表中，它已从徽标和菜单中添加了正确的间距，但菜单仍然出现在 2 行中。

我的CSS：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

#blue {
    width: 31px;
    height: 52px;
    float: left;
    position: relative;
    padding: 15px 0 0 420px;
}

.brand {
    width:261px;   
  }  

  .header-search {
    width:679px;
  }

.icemegamenu > ul > li  a.iceMenuTitle {
    padding: 1px 5px 0 5px;
  }

网站本身可以在http://www.leicesterbakery.co.uk查看

不胜感激任何解决此问题的建议。

提前致谢。

更新

我设法编写了以下 CSS 代码来解决我在桌面屏幕尺寸方面遇到的问题。不幸的是，这会破坏我的响应端代码，就像样式表中的代码一样，当我在任何浏览器（如 Firefox）中调整屏幕大小时，这不会正确显示。

任何想法我可以解决这个问题。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.body .container {
  padding: 10px 9px;
  }

.brand {
    width:221px;   
  } 

.brand img {
    max-width:90%; 
    padding-top:10px;
  }

.icemegamenu > ul > li  a.iceMenuTitle {
    padding: 1px 23px 0 23px;
  }

好的，我已经通过在我的 IE 媒体标签中添加 (min-width:980px) 来解决响应式代码的问题。最后一个问题是将 IE 和 firefox 上的电话号码对齐页面右侧...任何建议将不胜感激。

Answer 1

我减少了您的#blue div 的左侧填充，这似乎将数字放在了一行上。

Answer 2

如果你只想要一个用于 IE 的特殊 CSS，你可以这样做：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

你可以像这样添加IE的版本：

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

或者如果您只想使用一种样式，请查看此链接

参考：https://css-tricks.com/how-to-create-an-ie-only-stylesheet/