Merge pull request #737 from alphagov/fix-ie8-components

Fix a couple of IE8 issues

CHANGELOG.md

@@ -30,6 +30,11 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 - Removed some duplicated CSS rules from the outputted CSS
   ([PR #727](https://github.com/alphagov/govuk-frontend/pull/727))
 
+- Fixes a bug in IE8 where the button component did not have a shadow, by
+  rendering the shadow using a border for IE8 specifically – IE8 does not
+  support box-shadow
+  ([PR #737])(https://github.com/alphagov/govuk-frontend/pull/737)
+
 
 🆕 New features:
 

src/components/breadcrumbs/_breadcrumbs.scss

@@ -90,6 +90,10 @@
         height: auto;
         border: 0;
         color: $chevron-border-colour;
+
+        // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
+        // so fall back to using another sans-serif font to render the chevron.
+        font-family: Arial, sans-serif;
       }
     }
 

src/components/button/_button.scss

@@ -34,6 +34,10 @@
     cursor: pointer;
     -webkit-appearance: none;
 
+    @include govuk-if-ie8 {
+      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
+    }
+
     @include mq($from: tablet) {
       width: auto;
     }
@@ -72,6 +76,10 @@
     &:active {
       top: $button-shadow-size;
       box-shadow: none;
+
+      @include govuk-if-ie8 {
+        border-bottom-width: 0;
+      }
     }
 
     // The following adjustments do not work for <input type="button"> as