在IE 10中推送到下一行的元素

這適用於Firefox/Chrome，但在IE中，此滑塊的紅色滑塊會碰到視口外的下一行。在IE 10中推送到下一行的元素

綠色和紅色的側面和手柄都向左漂浮。我已經嘗試過應用300px寬度到.stSlide，認爲幻燈片的寬度可能會迫使紅色片段被推到下一行，但這並沒有解決問題。

http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview

.ngSlideToggle { 
    cursor: pointer; 
    visibility: hidden; 
    height: 28px; 
} 
.ngSlideToggle * { 
    box-sizing: content-box; 
} 
.ngSlideToggle > input[type=checkbox] { 
    display: none; 
} 
.ngSlideToggle > .stSlide { 
    transition: all 0.2s ease-in-out; 
} 
.stSlide > .stOff, 
.stSlide > .stOn, 
.stSlide > .stHandle { 
    display: block; 
    float: left; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 22px; 
    font-size: 12px; 
} 
.stSlide > .stOff, 
.stSlide > .stOn { 
    padding: 4px 10px; 

    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    font-size: 11px; 
    line-height: 18px; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-shadow: 0 1px #808080; 
} 
.stSlide > .stHandle { 
    padding: 2px 1px 2px 0; 
    min-width: 25px; 
    background: #fdfdfd; /* Old browsers */ 
    background: -o-linear-gradient(top, #fdfdfd 0%,#ebebeb 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #fdfdfd 0%,#ebebeb 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#ebebeb',GradientType=0); /* IE6-9 */ 

    border: 1px solid #ADADAD; 
    color: #c6c6c6; 
    letter-spacing: -1px; 
    text-align: center; 
} 
.stSlide > .stOn { 
    background: #8ab056; /* Old browsers */ 
    background: -o-linear-gradient(top, #8ab056 0%,#a2c46b 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #8ab056 0%,#a2c46b 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ab056', endColorstr='#a2c46b',GradientType=0); /* IE6-9 */ 
    border: 1px solid #88a75c; 
    border-right: none; 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
} 
.stSlide > .stOff { 
    background: #d4786a; /* Old browsers */ 
    background: -o-linear-gradient(top, #d4786a 0%,#e39080 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #d4786a 0%,#e39080 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d4786a', endColorstr='#e39080',GradientType=0); /* IE6-9 */ 
    border: 1px solid #bd6e61; 
    border-left: none; 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
}

來源

2013-10-04 Webnet

不知道如果你現在正在搞這個，但在IE10中，它只是在一小會兒之前工作。然後它停止在Chrome中工作，當我在這裏重新加載它時... – Joe

對於我來說在IE10中一切正常。 – matewka

儘管這修復了IE 10，但它同時兼顧了Firefox和Chrome。手柄現在關閉1或2個像素 – Webnet

嘗試用這種替代CSS爲.stSlide > .stOff, .stSlide > .stOn, .stSlide > .stHandle：

.stSlide > .stOff, 
.stSlide > .stOn, 
.stSlide > .stHandle { 
    display: inline-block; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 22px; 
    font-size: 12px; 
}

我在這裏所做的，我改變display到inline-block和刪除float。
很難說這是否會奏效，因爲對我而言，從開始就一切正常。
但它可能有幫助。

編輯：

還可以將此屬性添加到.stSlide

overflow: visible; 
white-space: nowrap;

以確保跨度將保持在同一直線上。

來源

2013-10-08 17:02:52 matewka

你是否說在沒有任何修改的情況下，在IE 10中它可以正常工作？我會測試這第一次得到的機會......謝謝！ – Webnet

我編輯了我的答案，以確保紅色的跨度不會闖入新行。請考慮一下。 – matewka

太棒了，謝謝！ – Webnet

在IE 10中推送到下一行的元素

回答

相關問題