Skip to content

Latest commit

 

History

History
114 lines (103 loc) · 6.03 KB

README.md

File metadata and controls

114 lines (103 loc) · 6.03 KB
Raw

bs-css-hacks

Index of CSS bugs/quirks/incompatibilities that Bootstrap works around, as of v3.2.0.
Goal: Ensure that each of these is mentioned in at least 1 MDN-like resource.
Because a common wiki is better than a bunch of scattered blog posts.

This list is based on scanning through the comments in Bootstrap's Less source code and the various warnings in Bootstrap's docs.

To be documented

iOS temporal <input> line-height

// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.

IE8 inline-block + float line wrapping bug

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content
}

IE8 and CSS max-width on images

IE9 <input> display: table-cell bug

// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input.

IE8-9 click events require non-transparent background-color bug

// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
  • twbs/bootstrap#11186
  • https://github.com/twbs/bootstrap/commit/6a93a6b88a4b874fba5a1d1edd817cbd91ccfacc
  • Explicit background-color: transparent; does not help
  • filter: alpha(opacity=0); alone does not help
  • opacity: 0; alone does not help
    • is not supported in IE8
    • is supported in IE9, but setting only an opacity doesn't avoid the bug
  • IE9: opacity + non-transparent background-color works as a fix
  • rgba(0,0,0,0)
    • is not supported in IE8
    • works as a fix in IE9
  • IE8-9: filter: alpha(opacity=0); + non-transparent background-color works as a fix

Resulting documentation improvements

The following incompatibilities have been successfully documented in MDN:

Hopefully these edits will survive in some form and not get wholesale reverted.

Unable to reproduce, so still undocumented

IE8 text input rendering bug when parent has opacity alpha filter

Seems there is a bug in IE7-8 where input[type="text"] & <textarea> that are in a container which has filter: alpha(opacity=N); are not re-rendered when being typed in.

Curiously enough, if you move your mouse out of the parent with the filter, the text will magically appear / update.