5

I have a carret in a drop down menu that works correctly in all browsers except Microsoft Edge. In Microsoft Edge is the caret split in two parts with a black line in the middle. I am attaching screenshot and css declaration. 

.caret {
    display: inline-block;
    width: 0px;
    height: 0px;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

enter image description here

ronline
  • 2,211
  • 1
  • 20
  • 27
  • 1
    `border-top: 4px solid\9;` ??? – smnbbrv Mar 15 '16 at 15:58
  • Please create a [fiddle](http://jsfiddle.net), or provide enough code to reproduce the issue here. – Sampson Mar 15 '16 at 18:37
  • 1
    @smnbbrv Looks like an old browser hack; some browsers (IE, in particular) would parse this as a proper border-top value, while others would discard the entire thing on account of the invalid ending. Never a wise approach; much better to find a different implementation, or put patch-up CSS in a separate stylesheet, loaded via conditional comments. – Sampson Mar 15 '16 at 18:38
  • @Sampson thank you very much for the explanation, looks really awkward :) – smnbbrv Mar 15 '16 at 18:51
  • Just to confirm, `\9` is a CSS hack targetting IE7, IE8 and IE9. You can find out more about it here: http://stackoverflow.com/questions/8004765/css-9-in-width-property. It was quite a common thing to have to do a few years ago if you needed to support various old IE versions, but I wouldn't expect to see many sites needing to use it in 2016. – Simba Apr 11 '16 at 14:03

1 Answers1

1

This should work across browsers:

HTML: 

<span class="caret"></span>

CSS:

.caret {
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid red;
    border: none\9; 
}
Rob Howells
  • 496
  • 3
  • 9