CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Simon Bengtsson
Simon Bengtsson

Reputation: 8151

Make bootstrap carets appear in IE8

I checked our site in IE8 now and realized that carets no longer show up for some reason. I copy and pasted the example below from the official bootstrap documentation, but looking at it in IE8 the caret won't appear. If some recent update broke carets in IE8, is there any way to get them back?

Here are screenshots from this JSFiddle of the problem in IE8-IE10 (carets only missing in IE8).

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
  </ul>
</div>

Upvotes: 1

Views: 915

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240938

The triangular .caret element is created with a CSS triangle. It seems like changing the border-top-style of the .caret from dashed to solid fixes the issue for IE8:

.btn .caret {
  border-top-style: solid;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
  </ul>
</div>

Upvotes: 7

Related Questions