1

IE 10 does not support conditionals and we all know that, so regular targeting rules for unsupported css properties arn't an option here. An image to see how IE 10 thinks he is not IE:

enter image description here

All right, but there are a thing called pointer-events that are taking more time to solve than it should. I tried this solution but no hope in my case. I've a text that is set on top of a deformed div button. I applied the pointer-events:none; to this div text. 

<div class="btn-text-facebook ">Facebook</div>
<a class="btn-facebook " href="#">
</a>

And the CSS:

.btn-facebook{
float: left;
background-color: #3B5998;
height: 100%;
padding: 10px;
width: 110px;
transform:skewX(-40deg);
-webkit-transform: skewX(-40deg);
z-index: 1;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow:  inset 0px -1px 1px #999,
            0px 1px 5px 0px rgb(17,17,17);           
    }

.btn-text-facebook{
position: fixed;
top: 17px;
right: 230px;
z-index: 2;
float: left;
color: white;
text-shadow: 2px 2px 2px rgba(250,250,250,0.1); 
pointer-events:none;}

My question then is: Is there a solution (js or css) for this kind of problem? Any standart way to deal with it or a good hack.

Community
  • 1
  • 1
André Lucas
  • 1,788
  • 1
  • 18
  • 36
  • What exactly is the problem? – Pointy May 16 '13 at 15:00
  • When I click the button, it clicks on the text once it's an object with click properties on top. I want it to click only on the button behind it. it works on Chrome, firefoz and safari, but not on IE or Opera as they don't have ponter-events. Thanks for the comment! – André Lucas May 16 '13 at 15:04
  • 1
    Have you looked into possibly using a polyfill? [Hand.js: A polyfill for supporting pointer events in every browser](http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx). Just a thought... – War10ck May 16 '13 at 15:07
  • 1
    @AndréLucas No problem buddy. Glad to help. You may also be interested in [modernizr](http://modernizr.com/) combined with [yepnope.js](http://yepnopejs.com/). Using these tools, you would be able to see if the browser supported pointer events. If it does, you can let the browser use the native support. If not, you can use _yepnope.js_ to conditionally load the polyfill. That way you aren't loading and parsing an extra JavaScript file that you don't need in browsers that have native support. This should ensure the user gets the best possible experience across all browsers. – War10ck May 16 '13 at 15:13

0 Answers0