IE 11 displays CSS differently from other browsers

Question

I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:

Here's what it's supposed to look like:

Now, I've looked through the dev tools on both Chrome and IE, and here's the results.

IE:

Chrome:

So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.

Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.

Answer 1

I have had similar problem.

Solution that worked for me was giving the button overflow: visible;

Working example (IE9+): http://jsfiddle.net/aBfF8/1/

Answer 2

The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.

You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.

Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)