Geek Answers Handbook

Bottom line escapes on hover with shadow in IE9

The bottom border moves down and down in IE9 when you hover / disable the button:

<!DOCTYPE html> <html> <head> <style> .btn:hover { box-shadow: 0 0 0 2px #b1b3b4; } </style> <head> <body> <div style="overflow: auto; border: 1px solid black;"> <div style="width: 110%; height: 20px;"> Wide content causing horizontal scrolling.... </div> <button class="btn">Hover Me</button> </div> </body> </html>

Fiddle: http://jsfiddle.net/WW3bh/6353/

Is this a known IE9 issue? How can I do it?

+8
html css html5 css3 internet-explorer-9
source share
8 answers

Try the following:

Option 1 (modify html slightly):

 <div style="overflow: auto; border: 1px solid black;"> <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div> <span><button class="btn">Hover Me</button></span> </div>

http://jsfiddle.net/WW3bh/10615/

Option 2 (with html provided, using js):

 $('.btn').hover(function () { var $btn = $(this); var originalPosition = $btn.css('position'); $btn.css('position', 'fixed'); // this.offsetHeight is needed to trigger browser reflow. this.offsetHeight; $btn.css('position', originalPosition); });

http://jsfiddle.net/WW3bh/10617/

+1
source share

Put display:block in .btn:hover .

Guess it fixes!

 .btn:hover { box-shadow: 0 0 0 2px #b1b3b4; display:block; }
+3
source share

Option 1:
Setting the height for the scrollable div seems to solve the problem:

Working example 1

 <div style="overflow: auto; border: 1px solid black; height:65px;"> <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div> <button class="btn">Hover Me</button> </div>

Option 2:
Use overflow-x:scroll; instead of overflow:auto; :

Working example 2

 <div style="overflow-x: scroll; border: 1px solid black;"> <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div> <button class="btn">Hover Me</button> </div>

Option 3:

Probably the best option, as it allows the shadow screen to be visible in IE9.
Wrap the button in a div with the .btn class, rather than placing the class directly on the button.

Working example 3

 .btn { display:inline; } .btn:hover { display:inline-block; border-radius:2px; box-shadow: 0 0 0 2px #b1b3b4; } <div style="overflow: auto; border: 1px solid black;padding:2px;"> <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div> <div class="btn"> <button>Hover Me</button> </div> <div class="btn"> <button>Hover Me</button> </div> <div class="btn"> <button>Hover Me</button> </div> </div>

Option 4:
Just for a laugh ...

Working example 4

 <!--[if IE]> <div id="noIE"><a href="http://www.mozilla.org/en-US/">Please download a Real Browser!</a> <br><sub>Internet Explorer is hateful non-compliant browser that kicks puppies... </sub> </div> <![endif]-->
+2
source share

To fix this, change: overlow: auto to overflow: visible , and it should be.

+1
source share

You have a very strange mistake, sir. And this is definitely a mistake, if you use ie9-mode on ie10, this will not happen.

I could not understand why, but if you manually resize the window, it seems to be returning to its original state. Maybe you can fake this with javascript?

Another thing I discovered was that if you set :hover {zoom: 1} to an element with a scroll, it will itself "reset" when it hangs. perhaps someone can use this to understand why he is acting as if he is doing it.

the fiddle for this is here: http://jsfiddle.net/WW3bh/10599/

+1
source share

try this css:

 .btn:hover { box-shadow: 1px 2px 0px 1px #b1b3b4; } <div style="overflow: auto; border: 1px solid black;"> <div style="width: 110%; height: 80px;">Wide content causing horizontal scrolling....</div> <button class="btn">Hover Me</button> <div>&nbsp;</div> </div>

http://jsfiddle.net/WW3bh/10472/

0
source share

Adding 100% height to the div should fix your problem.

 <div style="overflow: auto; border: 1px solid black;height: 100%"> <div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div> <button class="btn">Hover Me</button> </div>

Here is a working JSFiddle: http://jsfiddle.net/c2sBp/

0
source share

I checked this in Ie9 and did not find that the extension of the lower bound. Please, try. and let me know

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hover demo</title> <style> .btn{ box-shadow: 0 0 0 2px #b1b3b4; } .noBtn{ box-shadow: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div style="overflow: auto; border: 1px solid black;" > <div style="width: 110%; height: 20px;"> Wide content causing horizontal scrolling.... </div> <button id="hover">Hover Me</button> </div> <script> $(document).ready(function(){ try{ $('#hover').hover(function () { $("#hover").addClass('btn'); $("#hover").removeClass('noBtn'); }); $('#hover').mouseleave(function () { $("#hover").removeClass('btn'); $("#hover").addClass('noBtn'); }); }catch(e){ alert(e); } }); </script> </body> </html>

Please let me know after trying.

0
source share

More articles:


All Articles