From: Chris Rebert <code@chrisrebert.com>
Date: Thu, 7 Jan 2016 02:34:28 +0000 (-0800)
Subject: In IE9-11, prevent breadcrumb separator from getting underlined on :hover when not... 
X-Git-Tag: v4.0.0-alpha.3~359^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=86caa76f547a3ad44596aa9949e101c5c69a67d8;p=thirdparty%2Fbootstrap.git

In IE9-11, prevent breadcrumb separator from getting underlined on :hover when not using <ol> markup

Fixes #18733 in IE9-11
Also adds comments to the code explaining this and #18740.
---

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 6fb812d1cc..d5fba04a40 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -10,14 +10,29 @@
 .breadcrumb-item {
   float: left;
 
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item::before {
-    display: inline-block;
+    display: inline-block; // Suppress underlining of the separator in modern browsers
     padding-right: $breadcrumb-item-padding;
     padding-left: $breadcrumb-item-padding;
     color: $breadcrumb-divider-color;
     content: "#{$breadcrumb-divider}";
   }
 
+  // When not using <ul> markup, browsers normally underline the ::before pseudo-element
+  // (the separator between the breadcrumbs) when the user hovers over its originating breadcrumb <a> element.
+  // In modern browsers, this underline can be suppressed by setting `display:inline-block` on the pseudo-element.
+  // (Why doesn't simply setting `text-decoration:none` on the pseudo-element work? Because that's how text-decoration propagation has been spec'd in CSS.)
+  // IE9-11 suffer from a bug which prevents that solution from working.
+  // For them, we apply a hack where we first set `text-decoration:underline` and then later set `text-decoration:none`, both on the pseudo-element.
+  // This tricks IE into suppressing the underline.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline; // Part 1 of IE9-11 hack to suppress the underline
+  }
+  + .breadcrumb-item:hover::before {
+    text-decoration: none; // Suppress underlining of the separator in IE9-11 (requires an earlier setting of `text-decoration:underline`)
+  }
+
   &.active {
     color: $breadcrumb-active-color;
   }