Tr Display None Crashes IE9

display none ie9 crash with float left elements

I don't have IE9 to hand to test this, but just looking at the code I would say that the fundamental problem is floats inside inline elements.

inline elements are not supposed to contain any block content (including floats).

If you need this kind of layout, you should use display:inline-block instead of inline, although I think the floats will still be unnecessary, as the links should line up to the left within their contain anyway.

I think that should solve the problem.

Having said all that, if you've crashed the browser then it is a browser bug, regardless of the quality or validity of the code. The browser should be able to deal gracefully with this kind of thing; a crash is bad news. You should report it to Microsoft, even if you do manage to work around it. (it will be particularly helpful for them that you've got a simple test case to demonstrate the problem)

Mobile Table crashes IE9

Ok, well one fix seems to be adding float:left to the TABLE tag. I don't really want to float the table so I'm going to keep looking for other fixes.

Why does this HTML crash IE?

Is anyone aware of a way that I can report this to the IE team to get
it fixed?

Yes, go to http://connect.microsoft.com/ , enter "Internet Explorer Feedback Program" in the search box and it'll give you a link to report bugs like this to the IE team. They do read/act on them, though don't expect anything quick. Whether a bug in an old version of IE is deemed worthy of fixing I don't know though. It might be only security fixes that are still applied to IE8 nowadays, not any fix that will change the HTML rendering or Javascript behaviour.

CSS3 transform: rotate; in IE9

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

  -ms-transform: rotate(10deg);

It is possible that it may not work in the beta version; if not, try downloading the current preview version (preview 7), which is a later revision that the beta. I don't have the beta version to test against, so I can't confirm whether it was in that version or not. The final release version is definitely slated to support it.

I can also confirm that the IE-specific filter property has been dropped in IE9.

[Edit]

People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/ which is useful for testing various CSS3 features in all browsers.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

However I have done some independant tests using -ms-transform:rotate() in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.

Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation

[EDIT]

Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.

The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

...and have it work in IE 6/7/8, without having to use the filter syntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it's using similar syntax to other browsers)

HTML table with fixed header/columns - css solution - not working in Firefox

Since, the problem is only in firefox, I guess we can cheat a little bit and use CSS transforms with the prefix -moz and other browsers will just ignore it. So something like

jQuery('.valuation td[column="A"],.valuation td[column="B"]').css({
    'left': _left,
    '-moz-transform': "translate3d(" + _left + "px,0px,0)"
});

jQuery('.valuation td[row="1"],.valuation td[row="3"]').css({
    'top': _top,
    '-moz-transform': "translate3d(0px," + _top + "px,0)"
});

//because there's only only one css property, row will overwrite column above.
//so the code below selects the case where it has both translateX and translate Y
jQuery('.valuation td[row="1"],.valuation td[row="3"]')
     .filter('.valuation td[column="A"],.valuation td[column="B"]')
     .css('-moz-transform', "translate3d(" + _left + "px," + _top + "px,0)");

Example

---

Related Topics