Ніжняя мяжа ўцякае пры навядзенні курсора на кнопку з каробкай-ценем у IE9

Ніжняя мяжа рухаецца ўніз і зноў у IE9 пры навядзенні/unhovering кнопку:

<!DOCTYPE HTML>
<html>
<head>
    
<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/

Гэта вядомая праблема IE9? Як я працую, што вакол?

8
вы павінны паспрабаваць дадаць гэта ўнутры '<�галавы>' тэгі: <�мета змест = "IE = 9 'HTTP-эквив =' ​​X-UA-Compatible '/>»
дададзена аўтар Xarcell, крыніца
Я праверыў код у Google Chrome і ён дае памежны эфект. і ня змяняць любы код. што можа перашкодзіць вашым дзівы і іх адлюстраванне. Затым правяраецца ў IE9. а мяжа не выцякае. Праверыць і паглядзець, калі ён працуе.
дададзена аўтар Anobik, крыніца
Вы хочаце jQuery ці код яваскрипта ці толькі CSS зрабіць?
дададзена аўтар Anobik, крыніца
@Anobik JQuery/JavaScript рашэнне таксама добра
дададзена аўтар Andrey, крыніца
@Xarcell Гэта не дапаможа. Без гэтага мета старонка візуалізуецца ў рэжыме IE9, а таксама ў любым выпадку.
дададзена аўтар Andrey, крыніца
чаму вы не проста паставіць ніжнюю мяжу на класе .btn?
дададзена аўтар Aslam, крыніца

8 адказы

Змешчаны дысплей: блок у .btn: парыць .

Адгадайце, што будзе гэта выправіць!

.btn:hover {
    box-shadow: 0 0 0 2px #b1b3b4;
    display:block;
}
3
дададзена
Дзякуй за ідэю, што ён робіць. Але ўсё ж такі мне трэба кнопку, каб быць ўбудаваны элемент (на самай справе ў цяперашні час з'яўляецца ўбудаваны блок), так што я магу размясціць некалькі кнопак у шэраг без дадатковай разметкі.
дададзена аўтар Andrey, крыніца
то я павінен прыняць ідэю Xarcell, будзе працаваць як добра!
дададзена аўтар Ryan de Vries, крыніца

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

<�Моцны> Працоўны прыклад 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; rather than overflow:auto;:

<�Моцны> Працоўны прыклад 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>

Варыянт 3:

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

<�моцны> Працоўны прыклад 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 laughs...

<�Моцны> Працоўны прыклад 4 </моцны>

<!--[if IE]>
    <div id="noIE">Please download a Real Browser!
        
Internet Explorer is hateful non-compliant browser that kicks puppies... </div>
2
дададзена
@EugineJoseph Дзякуй, запас быў перажытак ад папярэдняга метаду, які я забыўся выдаліць ... адрэдагавана выправіць.
дададзена аўтар apaul, крыніца
@Andrey На жаль пра тое, што абноўлены OPTION3, праверыць яго
дададзена аўтар apaul, крыніца
Дзякуй за ідэі. Варыянт 1 не працуе, як у маім выпадку кантэйнеры маюць дынамічнае ўтрыманне і патрэба ў пашырэнні базы на яго ўтрыманне, варыянт 2 - цікава, але ў большасці выпадкаў няма перапаўнення і скролерам не патрабуецца, варыянт 3 эквівалентна Райана адказаць дысплей: блок, варыянт 4 - гэта лепшы адзін! :)
дададзена аўтар Andrey, крыніца
@Andrey вы выдалілі запас з .btn ў OPTION3? Я думаю, што гэта тое, што вы хочаце.
дададзена аўтар Eugine Joseph, крыніца

Каб гэта выправіць, змяніць: overlow: аўто у пераліву: бачны і што павінна так.

1
дададзена
гм, я да гэтага часу ёсць патрабаванне, каб мець паласы пракруткі ў кантэйнеры. Я не магу выдаліць «перапаўнення: аўто» з усіх элементаў, якія змяшчаюць кнопкі, было б вялікай беспарадак.
дададзена аўтар Andrey, крыніца

Вы атрымалі сябе сапраўды дзіўна памылка там сэр. І гэта, безумоўна, памылка, калі вы карыстаецеся IE9-рэжым на IE10, гэта не адбудзецца.

Я не мог зразумець, чаму, але мне здаецца, каб вярнуцца ў зыходны стан пры змене памераў акна ўручную. Можа быць, вы можаце падрабіць гэта з JavaScript?

Іншая справа, я выявіў, што калі вы ўсталявалі : лунання {трансфакатара: 1} на элеменце са сувоем, ён «скінуць» сябе пры навядзенні курсора на яго. можа быць, хто-то можа выкарыстоўваць гэта, каб зразумець, чаму ён дзейнічае, як гэта робіць.

fiddle for it here: http://jsfiddle.net/WW3bh/10599/

1
дададзена

Паспрабуйце гэта:

Варыянт 1 (змяніць HTML трохі):

<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>

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

Варыянт 2 (з прадастаўленым HTML, з дапамогай 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
дададзена
: '(Я не атрымаў узнагароду:' (: P Жартую: D
дададзена аўтар Anobik, крыніца
Дзякуй, даючы шчадроты тут, паколькі гэтыя два варыянты з'яўляюцца найбольш практычнымі рашэннямі для мяне (яны не парушаюць існуючы стыль у мяне ёсць). Я прымаю адказ пазней (я лічу прыняцце варыянту apaul ў 3 ці адказ Anobic, так як яны выглядаюць, маюць падобныя ідэі, як варыянт 1 і варыянт-тут адносна).
дададзена аўтар Andrey, крыніца

Я праверыў гэта ў IE9 і не знайшоў, што мяжа дна пашыраецца. калі ласка, дайце паспрабаваць. і дайце мне ведаць

<!DOCTYPE HTML>

<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  
  <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>

Калі ласка, дайце мне ведаць, пасля спробы.

0
дададзена
Вы можаце выкарыстоўваць клас «BTN» і $ «БТН» замест "#hover"
дададзена аўтар Anobik, крыніца

Калі ласка, паспрабуйце гэты 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> </div>
</div>

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

0
дададзена
Тым не менш прайграваны.
дададзена аўтар Andrey, крыніца

Даданне вышыні 100% у DIV павінен ліквідаваць праблему

<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 the working JSFiddle: http://jsfiddle.net/c2sBp/

0
дададзена
Гэта не я, але, магчыма, хтосьці вырашыў downvote ў адказ выглядае як дублікат (ўсталявальнае значэнне вышыні вырашае гэтую праблему, як апісана ў варыянце 1 адказ apaul в). Upvoting гэта, так як гэта не дакладная копія (вышыня усталёўваецца ў% у параўнанні з рх ў адказ apaul в).
дададзена аўтар Andrey, крыніца
Можа хто-небудзь растлумачыць, чаму мой адказ быў ўніз прагаласавалі? Гэта будзе карысна, каб зразумець, дзе я быў няправы. Прывітання. :)
дададзена аўтар iDesi, крыніца
Дзякуй. Гэта мае сэнс. :)
дададзена аўтар iDesi, крыніца