Skip to content

Remove Internet Explorer specific CSS hacks, bugfixes and styles #6993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
querkmachine wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Remove Internet Explorer specific CSS hacks, bugfixes and styles #6993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e22993
Remove Internet Explorer specific CSS hacks and styles
querkmachine Apr 28, 2026
b52739c
Rework hover styles on small checkboxes and radios
querkmachine Apr 28, 2026
0dded09
Add changelog entry
querkmachine Apr 28, 2026
0678d3b
Update CSS snapshots
querkmachine Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ We made this change in [pull request #6861: Resolve `pkg:` URLs from `dist/govuk
We've made fixes to GOV.UK Frontend in the following pull requests:

- [#6831: Fix header link hover state in Safari](https://github.com/alphagov/govuk-frontend/pull/6831)
- [#6993: Remove Internet Explorer specific CSS hacks, bugfixes and styles](https://github.com/alphagov/govuk-frontend/pull/6993)

## v6.1.0 (Feature release)

Expand Down
35 changes: 10 additions & 25 deletions packages/govuk-frontend/src/govuk/components/checkboxes/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,6 @@
transform: rotate(-45deg);
border: solid;
border-width: 0 0 5px 5px;
// Fix bug in IE11 caused by transform rotate (-45deg).
// See: alphagov/govuk_elements/issues/518
border-top-color: transparent;
opacity: 0;
background: transparent;
}
Expand Down Expand Up @@ -280,30 +277,18 @@
//
// We use two box shadows, one that restores the original focus state [1]
// and another that then applies the hover state [2].
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
// Set different HCM colour when we have both hover/focus applied at once
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
outline-color: Highlight;
}
// prettier-ignore
box-shadow:
0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus), // 1
0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2
}

// For devices that explicitly don't support hover, don't provide a hover
// state (e.g. on touch devices like iOS).
//
// We can't use `@media (hover: hover)` because we wouldn't get the hover
// state in browsers that don't support `@media (hover)` (like Internet
// Explorer) – so we have to 'undo' the hover state instead.
@media (hover: none), (pointer: coarse) {
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
box-shadow: initial;
}

// We only want this to apply to browsers that support hover states.
@media (hover: hover) {
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
box-shadow: 0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus);
// Set different HCM colour when we have both hover/focus applied at once
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
outline-color: Highlight;
}
// prettier-ignore
box-shadow:
0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus), // 1
0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2
}
}
}
Expand Down
20 changes: 0 additions & 20 deletions packages/govuk-frontend/src/govuk/components/details/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,26 +44,6 @@
margin-bottom: 0;
}

// Hack to target IE8 - IE11 (and REALLY old Firefox)
// These browsers don't support the details element, so fall back to looking
// like inset text
@media screen\0 {
.govuk-details {
border-left: base.$govuk-border-width-wide solid;
border-left-color: base.govuk-functional-colour(border);
}

.govuk-details__summary {
margin-top: base.govuk-spacing(3);
}

.govuk-details__summary-text {
@include base.govuk-typography-weight-bold;
@include base.govuk-responsive-margin(4, "bottom");
padding-left: base.govuk-spacing(4);
}
}

// We wrap styles for newer browsers in a feature query, which is ignored by
// older browsers, which always expand the details element.
//
Expand Down
6 changes: 1 addition & 5 deletions packages/govuk-frontend/src/govuk/components/fieldset/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,12 @@
.govuk-fieldset__legend {
@include base.govuk-font($size: 19);

// Fix legend text wrapping in Edge and IE
// 1. IE9-11 & Edge 12-13
// 2. IE8-11
// 1. Fix legend text wrapping in IE9-11 & Edge 12-13
box-sizing: border-box; // 1
display: table; // 2
max-width: 100%; // 1
margin-bottom: base.govuk-spacing(2);
padding: 0;
color: base.govuk-functional-colour(text);

white-space: normal; // 1
}

Expand Down
3 changes: 0 additions & 3 deletions packages/govuk-frontend/src/govuk/components/panel/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@
@media #{base.govuk-until-breakpoint(tablet)} {
padding: base.govuk-spacing(4) - base.$govuk-border-width;

// Support IE (autoprefixer doesn't add this as it's not a prefix)
word-wrap: break-word;

// This is an if-all-else-fails attempt to stop long words from
// overflowing the container on very narrow viewports by forcing them to
// break and wrap instead. This overflowing is more likely to happen when
Expand Down
4 changes: 2 additions & 2 deletions packages/govuk-frontend/src/govuk/components/password-input/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
}

.govuk-password-input__input {
// IE 11 and Microsoft Edge comes with its own password reveal function. We
// want to hide it, so that there aren't two controls presented to the user
// Microsoft Edge comes with its own password reveal function. We want
// to hide it, so that there aren't two controls presented to the user
// that do the same thing but aren't in sync with one another. This doesn't
// affect the function that allows Edge users to toggle password visibility
// by pressing Alt+F8, which cannot be programmatically disabled.
Expand Down
32 changes: 10 additions & 22 deletions packages/govuk-frontend/src/govuk/components/radios/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,30 +299,18 @@
//
// We use two box shadows, one that restores the original focus state [1]
// and another that then applies the hover state [2].
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
// Set different HCM colour when we have both hover/focus applied at once
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
outline-color: Highlight;
}
// prettier-ignore
box-shadow:
0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus), // 1
0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2
}

// For devices that explicitly don't support hover, don't provide a hover
// state (e.g. on touch devices like iOS).
//
// We can't use `@media (hover: hover)` because we wouldn't get the hover
// state in browsers that don't support `@media (hover)` (like Internet
// Explorer) – so we have to 'undo' the hover state instead.
@media (hover: none), (pointer: coarse) {
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
box-shadow: initial;
}

// We only want this to apply to browsers that support hover states.
@media (hover: hover) {
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
box-shadow: 0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus);
// Set different HCM colour when we have both hover/focus applied at once
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
outline-color: Highlight;
}
// prettier-ignore
box-shadow:
0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus), // 1
0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2
}
}
}
Expand Down
10 changes: 0 additions & 10 deletions packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,16 +174,6 @@
display: flex;
flex-wrap: wrap;
margin-bottom: 0;

// However... IE11 totally trips over flexbox and doesn't wrap anything,
// making all of the items into a single, horizontally scrolling row,
// which is no good. This CSS hack removes the flexbox definition for
// IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
//
// CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
@media screen and (min-width: 0\0) {
display: block;
}
}
}

Expand Down
13 changes: 0 additions & 13 deletions packages/govuk-frontend/src/govuk/components/summary-list/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,19 +244,6 @@

.govuk-summary-card__action {
display: inline;

// We use the following media query to target IE11 and 10 only to add margin
// between actions.
//
// We do this because we're using row-gap to create space between actions on
// more evergreen browsers which IE doesn't support. @supports currently isn't
// a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
//
// Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
// which also includes an explanation of why this works
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
margin-bottom: base.govuk-spacing(1);
}
}

.govuk-summary-card__action:last-child {
Expand Down
4 changes: 2 additions & 2 deletions packages/govuk-frontend/src/govuk/helpers/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
text-decoration-thickness: $govuk-link-hover-underline-thickness;
// Disable ink skipping on underlines on hover. Browsers haven't
// standardised on this part of the spec yet, so set both properties
text-decoration-skip-ink: none; // Chromium, Firefox
text-decoration-skip: none; // Safari
text-decoration-skip-ink: none; // Chromium, Firefox, Safari 15.4+
text-decoration-skip: none; // Safari 12.1–15.3
}
}

Expand Down
6 changes: 1 addition & 5 deletions packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@
padding: 0 govuk-if($important, !important);

overflow: hidden govuk-if($important, !important);

// `clip` is needed for IE11 support
clip: rect(0 0 0 0) govuk-if($important, !important);
Copy link
Copy Markdown
Contributor

@NickColley NickColley Apr 28, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like given that IE11 may be used by some disabled people using assistive technologies (screen readers) that maybe this is justified to leave in if it's not causing any grief for users?

clip-path: inset(50%) govuk-if($important, !important);

border: 0 govuk-if($important, !important);
Expand Down Expand Up @@ -75,11 +72,10 @@
/// @access public

@mixin govuk-visually-hidden-focusable($important: true) {
// IE 11 doesn't support the combined `:not(:active, :focus)` syntax.
// Also allows for ':focus' companion classes from postcss-pseudo-classes
// which the plugin unfortunately doesn't handle automatically.
// stylelint-disable-next-line selector-class-pattern
&:not(:active):not(:focus):not(.\:focus) {
&:not(:active):not(.\:focus):not(:focus) {
@include _govuk-visually-hide-content($important: $important);
}
}
3 changes: 0 additions & 3 deletions packages/govuk-frontend/src/govuk/objects/_button-group.mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@
.govuk-link {
@include base.govuk-font($size: 19, $line-height: 19px);
display: inline-block;
// Prevent links overflowing their container in IE10/11 because of bug
// with align-items: center
max-width: 100%;
margin-top: $link-spacing;
margin-bottom: $link-spacing + $vertical-gap;
text-align: center;
Expand Down
4 changes: 0 additions & 4 deletions packages/govuk-frontend/src/govuk/objects/_main-wrapper.mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,6 @@
/// @access private
@mixin styles {
.govuk-main-wrapper {
// In IE11 the `main` element can be used, but is not recognized –
// meaning it's not defined in IE's default style sheet,
// so it uses CSS initial value, which is inline.
display: block;
padding-top: base.govuk-spacing(4);
padding-bottom: base.govuk-spacing(4);

Expand Down
6 changes: 0 additions & 6 deletions packages/govuk-frontend/src/govuk/objects/_template.mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,6 @@
scroll-padding-top: 0;
}
}

// Force the scrollbar to always display in IE, to prevent horizontal page
// jumps as content height changes (e.g. autocomplete results open).
@media screen {
overflow-y: scroll;
}
}

// Applied to the <body> element
Expand Down
Loading
Loading