Most Sophisticated CSS Rendering Bug of All Time (Ie9)

IE9 + RichFaces Rendering problem

RichFaces 3.x does not support IE9 (and there are no plans to introduce it), refer to this topic:
http://community.jboss.org/thread/156720

You can upgrade to RF 4,

or implement a filter to force IE9 to run in compatibility mode:

public void doFilter(final ServletRequest request, final ServletResponse response, final FilterChain chain) throws IOException, ServletException {
    HttpServletResponse resp = (HttpServletResponse) response;
    resp.addHeader("X-UA-Compatible", "IE=EmulateIE8");
    chain.doFilter(request, resp);
}

CSS issue with IE9 and floating divs aligning

I think this is one of those clear-fix issues. I also run into these problems every now and then. The fix, or hack is to always add a new element a so-called pseudo-element to it for it to render correctly. So

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Here cf will be your content

Its from http://nicolasgallagher.com/micro-clearfix-hack/

I hope this fixes it for you, let me know.

iframe not rendering in ie9 mode when containing page is in quirks mode

I ended up using an object tag instead of an iframe, it seems to work ok across modern browsers.

<object type="text/html" data="http://example.com"></object>

It turns out you can't modify the URL using javascript in IE9, but that's not a big deal - removing/adding a new object element works just as well for this.

Update:
This tag can also be in an intermediate page that the iframe points to and it all works fine
Update 2:
This solution does not work in IE10

IE9 Scrolling bug (border line repeated on screen)

Credit to Matt K for helping me realize what the problem might be... The apparently this is a GPU / Driver issue as when I disabled hardware rendering under advanced in internet options, restarted the browser the issue disappeared.

Aiken to the FF hw acceleration, my crappy intel gpu chipset on my laptop causes things to break when hardware acceleration is turned on... I'm going to have to test this at home now, with my tower that has a much better gpu.

IE9 not recognizing font-weight: lighter

This appears to be a problem with this specific font, or with the way Google makes IE use it. Your code works for other Google fonts with Book (300) font weight, like Lato and Open Sans.

---

Related Topics