Fix checkbox and radio button grid stuff in IE

[Scotchester]

Autoprefixer was not correctly being skipped for the display: inline-grid; property on the labels of our radio buttons and checkboxes. The Less step was removing the Autoprefixer control comment, so Autoprefixer didn't know to skip it. Adding the ! to the comment opening characters tells Less to keep the comment in so Autoprefixer now sees it.

I also switched from the /* autoprefixer: off */ method, which required that the rule to be skipped lived in its own block, to /* autoprefixer: ignore next */, so we can do away with those extra blocks.

Changes

• cf-forms: Switch from /* autoprefixer: off */ to /*! autoprefixer: ignore next */ to correctly exclude the radio & checkbox label display: inline-grid; rule from Autoprefixer

Testing

Follow the instructions on https://github.com/cfpb/capital-framework/blob/master/CONTRIBUTING.md and view a page with checkboxes in IE, for example, inside the filter controls expandable on https://www.consumerfinance.gov/about-us/blog/.

Screenshots

Before

After

Checklist

• [x] PR has an informative and human-readable title
• [x] Changes are limited to a single goal (no scope creep)
• [x] Code can be automatically merged (no conflicts)
• [x] Code follows the standards laid out in the development playbook
• [x] Passes all existing automated tests
• [x] Any change in functionality is tested
• [x] New functions are documented (with a description, list of inputs, and expected output)
• [x] Placeholder code is flagged / future todos are captured in comments
• [x] Visually tested in supported browsers and devices (see checklist below :point_down:)
• [x] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)
• [x] Reviewers requested with the Reviewers tool :arrow_right:

Testing checklist

Browsers

• [x] Chrome
• [x] Firefox
• [x] Safari
• [x] Internet Explorer 9, 10, and 11
• [x] Edge
• [x] iOS Safari
• [x] Chrome for Android

[contolini]

I don't think it's a side effect of this PR but I'm posting it here in case it's related: In IE helper text is inline with the label instead of below it.

[anselmbradford]

@contolini https://github.com/cfpb/capital-framework/pull/631#issuecomment-353662165