ie下帶滾動(dòng)條容器background屬性和border屬性的bug

Tonny 發(fā)布于2019-08-29 17:11 / 3374人閱讀

摘要：經(jīng)測(cè)試現(xiàn)象消失。總結(jié)問題雖然解決了但還是花費(fèi)了很多時(shí)間的問題出現(xiàn)的根本原因還是不清楚目前只能歸結(jié)于瀏覽器的了因?yàn)槲易约旱南率呛玫闹辉跍y(cè)試機(jī)上的不行愿以后不再兼容

現(xiàn)象
封裝的angularjs hikSelect指令在個(gè)別ie11瀏覽器下下拉選項(xiàng)在滾動(dòng)是會(huì)出現(xiàn)橫線.

分析
打開調(diào)試工具,發(fā)現(xiàn)去掉滾動(dòng)容器的上下邊框后該現(xiàn)象消失,因此認(rèn)為是邊框?qū)е铝嗽搯栴},但這個(gè)邊框不能去掉,因此還要繼續(xù)分析.自己寫了一個(gè)帶滾動(dòng)條帶邊框的div在ie下沒問題,因此不全是邊框?qū)е碌脑搯栴},后面把有問題的樣式直接全部拿過來一個(gè)個(gè)排除,發(fā)現(xiàn)當(dāng)設(shè)置background: #fff時(shí)問題出現(xiàn)了.

結(jié)論
經(jīng)過測(cè)試當(dāng)在一個(gè)帶滾動(dòng)條的div上同時(shí)設(shè)置background和上下邊框的border屬性,拖動(dòng)滾動(dòng)條時(shí)會(huì)出現(xiàn)橫線.

解決方法
由于border和背景需要設(shè)置,因此決定添加一層div試試,將背景色、overflow和max-height屬性移到新添加的子div容器上設(shè)置。經(jīng)測(cè)試現(xiàn)象消失。

總結(jié)
問題雖然解決了,但還是花費(fèi)了很多時(shí)間的,問題出現(xiàn)的根本原因還是不清楚,目前只能歸結(jié)于ie瀏覽器的bug了,因?yàn)槲易约旱膇e下是好的,只在測(cè)試機(jī)上的ie不行,愿以后不再兼容ie.

容器云 border屬性 ie滾動(dòng)條匹配對(duì)象的屬性和函數(shù) expression控制滾動(dòng)條ie

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114157.html

相關(guān)文章

CSS題目及答案整理

摘要：解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡稱項(xiàng)目。原文鏈接在這里 CSS 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型（相當(dāng)于box-sizing: bor...

lijy91 2019-08-29 12:34 評(píng)論0 收藏0
可視化效果(Visual effects)

摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如：一行無法拆分，導(dǎo)致行盒比...

JowayYoung 2019-08-29 12:37 評(píng)論0 收藏0
瀏覽器滾動(dòng)條樣式還可以改變，你知道嗎？

摘要：有時(shí)候，我們是不是覺得瀏覽器默認(rèn)的滾動(dòng)條很，那么瀏覽器滾動(dòng)條樣式能否改變呢，答案是肯定的，今天就給大家分享一下怎么改變?yōu)g覽器的默認(rèn)滾動(dòng)條，讓我們的頁面更加炫酷。有時(shí)候，我們是不是覺得瀏覽器默認(rèn)的滾動(dòng)條很low，那么瀏覽器滾動(dòng)條樣式能否改變呢，答案是肯定的，今天就給大家分享一下怎么改變?yōu)g覽器的默認(rèn)滾動(dòng)條，讓我們的頁面更加炫酷。在次之前，我們先來了解一下滾動(dòng)條產(chǎn)生的原因，通俗的來講就...

fjcgreat 2019-08-30 15:53 評(píng)論0 收藏0
50道CSS基礎(chǔ)面試題（附答案）

摘要：彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來。偶數(shù)字號(hào)相對(duì)更容易和設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。 1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin低版本I...

wua_wua2012 2019-08-30 13:58 評(píng)論0 收藏0
整理 45 道 CSS 基礎(chǔ)面試題（附答案）

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin 2、box-sizing屬性？用來控制元素的盒子模型的解析模式，默認(rèn)為content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 評(píng)論0 收藏0