CSS Not Rendered in Ie 10

CSS perspective not working in Internet Explorer 10 or Firefox

Unit of length

IE and Firefox require a unit of length on perspective values (px, em).

   -moz-perspective: 800px;
        perspective: 800px;

For Chrome and Safari, the unit of length is optional when using the -webkit prefix.

-webkit-perspective: 800;    /* This works with or without the px unit */

W3C standards

It's safer to add a unit of length to all perspective values. It's more consistent with the W3C standard. It's the one approach that all browsers support. And once Chrome and Safari start supporting perspective without a prefix, it's possible that they'll require a unit of length (for consistency with W3C standards and with other browsers).

-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;

Note: The current info on w3schools.com is outdated. There's no mention of support for IE10 or Firefox, and their examples do not have a unit of length. The more-recent examples on developer.mozilla.org include a unit of length, consistent with the W3C standards.

css url() not recognized in internet explorer 10

The content property is only valid on :before and :after pseudo-elements. You should change it to:

.ui-icon-zoom-in { 
  background: url(images/16x16/ZoomIn.png) no-repeat; 
  width:16px;
  height:16px;
}

Apart from that, IE8+ only supports content property if a valid DOCTYPE is specified.

CSS flexbox not working in IE10

Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE):
http://css-tricks.com/using-flexbox/

edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/

CSS :active not working (IE 10)

Replace <a> with <button>

Add extra CSS:

padding:0 0 5px 0; /* This is necessary for the Box shadow to work in Chrome */
border:0;
outline:0;
overflow:visible; /* Necessary for any images to overflow past button edges */
cursor:pointer;
background:none; /* This eliminates grey background in FF and IE */
box-sizing:content-box; /* By default, Chrome BUTTONS are border-box, this fixes it */

Finish!

JS Fiddle: http://jsfiddle.net/D8nJ6/1/

BAM!

In IE9, there's still an issue with the rounded-borders, but it has something to do with the Rounded-Border + Background-Gradient combination. Still looking for a fix.

IE specific CSS not rendering

TARGET IE 10

http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#yourDiv {margin-left:-570px;}
}

fonts not rendering in ie 10 or 11

Looking at the console in IE of your website, there appear following error -

"CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable."

On web, these are the two links which talk about this issue and common solution:
https://github.com/tapquo/lungo.icon/issues/1
and
http://codecanyon.net/forums/thread/css3114-fontface-failed-opentype-embedding-permission-check-permission-must-be-installable/78963

common solution link:
http://carnage-melon.tom7.org/embed/

However the talked tool seems available only for older version of windows and not for latest version of windows.

---

Related Topics