如何仅为IE应用CSS样式

Question

I am trying to fix issues that I am having with how my site is displayed in Internet Explorer. When searching the internet I cam across the following code to use in order to apply CSS styles for IE only. I have attached 2 images, 1 of the site in IE (tel no, menu not displayed correctly), 2nd the site in Firefox and how it should be displayed.

I am currently going through the site to try and fix these issues but wanted some advice in order to make sure I'm applying the right code so that this displays correctly in all IE versions and doesn't mess up anything on the browsers.

Ideally need some help to display menu and tel no correctly. Currently I have applied the following code to my stylesheet, which has added the correct spacing from the logo and menu, but menu still appears in 2 lines.

my 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;
  }

The site itself can be viewed at http://www.leicesterbakery.co.uk

Would appreciate any advice to fix this.

Thanks in advance.

UPDATE

I have managed to write the following CSS code which fixes the issues I am having for a desktop screen size. Unfortunately this breaks my code for the responsive side as with this code in the stylesheet, when I resize screen size in any browser like firefox this doesnt show up properly.

Any ideas how i can fix this.

@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;
  }

Ok I have managed to sort out the issue with the responsive code by adding (min-width:980px) to my media tag for IE. Last issue is to align the tel no on both IE and firefox to the right of the page... any advice would be greatly appreciated.

Answer 1

我减少了#blue div上的左边距，这似乎得到了一行的数字。

Answer 2

If you want a special CSS for IE only you can do it like this:

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

and you can add the version of IE like this:

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

or if you want to just use one style, check this link for

references: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/