IE 7 and 8 not showing perfect design view

Question

I have a problem in IE 7, 8.

I am showing 3 products / row, in Firefox, Chrome, Opera and IE 9,10,11

It shows me perfect design. BUT in IE 7,8 it change complete product design.

I don't get any idea how to get perfect product view in IE 7, 8

How can i do this ?

Answer 1

I absolutely hate IE, specially versions 6, 7 and 8. When you are designing a wordpress theme, you have to style it twice, once for proper browsers and then for the IE ancients. The other big thing to remember, these ancients don't have support for media queries.

So to solve your problem, create a stylesheet called ie.css. You will use this to do all your styling for IE 7 and 8.

Next you will need to enqueue that stylesheet, but we will enqueue it conditionally. This stylesheet will only load for IE versions up to IE8. So in your functions.php, add the following

function enqueque_ie_stylesheet() {
// Load the Internet Explorer specific.  stylesheet.
 wp_enqueue_style( 'style-ie',   get_template_directory_uri() . '/ie.css',   array(), '' );
    wp_style_add_data( 'style-ie', 'conditional', 'lt IE 9' );
 }
add_action( 'wp_enqueue_scripts', 'enqueue_ie_stylesheet' );

You can now add your styles in ie.css. Just remember to change get_template_directory_uri to get_stylesheet_directory_uri if you are using a child theme

Answer 2

You can use CSS hack. The “hack” is the \9 following the value and preceding the closing semicolon. This will target IE8 and below.

Example:

.element {  
    margin-bottom: 20px;  
    margin-bottom: 10px\9;  
}