IE9 does what he wants?
soumer
I have a website with a drop-down menu and I'm using chosen for a nice look.
It looks in every browser the same (hoover = gray background) except for IE9.
Tests were made with BrowserStack
ASP.NET code:
<select data-placeholder="Select some tags" class="chzn-select" multiple style="width: 350px;" tabindex="4">
<option value=""></option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
CSS code:
.chzn-container .chzn-results .highlighted {
background-color: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
background-image: linear-gradient(#aaa 20%, #999 90%);
color: #fff;
}
.chzn-container .chzn-results .highlighted em {
background: transparent;
}
Looks like IE9 isn't getting the attributes..
But why? Visual Studio 2012 tells me IE is compatible with these parameters.
I appreciate all hints, thanks!
Phylogenesis
Internet Explorer 8 and 9 have CSS2.1 compliant filter strings for this:
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#999', GradientType=0);";
Edit:
I have been looking into this more and it looks like IE9 does not support gradients with DirectX filters.
However, with a bit of playing around, you can get them to work with a combination of data URIs and SVG:
SVG Image to emulate the gradient background:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="20%" stop-color="#aaa" stop-opacity="1"/>
<stop offset="90%" stop-color="#999" stop-opacity="1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>
Which leads to the following CSS:
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+DQogICAgPGRlZnM+DQogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2FhYSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPC9kZWZzPg0KICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KPC9zdmc+");
An example jsFiddle is provided.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
What does _expand do?
- 2
What does UnityMainThreadDispatcher do?
- 3
Svelte: What does $: mean?
- 4
IE9 not correctly running .each() jQuery function
- 5
What does a "< <(...)" redirection mean?
- 6
What does $# mean in shell?
- 7
Change IE9 Document Mode to IE9 Standards
- 8
What does the notation <> mean ?
- 9
Firebreath plugin can't be loaded in IE9/IE10 if running IE as administrator
- 10
RegEx mistakenly removes first paragraph in IE9
- 11
What does (+) mean in SQLPlus?
- 12
Getting the Class attribute works in IE9 but not IE8
- 13
뷰 외부 요소의 IE9 selectAllChildren
- 14
IE9 / 8 양식 문제
- 15
what does editable mean?
- 16
html elements appended twice in ie9
- 17
What does [ ] mean in JS?
- 18
CSS3 animation (keyframes) not working in IE9
- 19
What does "+=" to a PropertyChangedEventHander mean?
- 20
Swfobject video doesn't work in IE9
- 21
IE9 on Windows 7 slow (excessive rendering)
- 22
Javascript charting library for IE9
- 23
what SED -i does
- 24
What does this mean in Xcode?
- 25
Windows 10 wants to delete a previous version of windows. What specfically will be deleted?
- 26
What makes the object.prototype to the constructor function if he has no name?
- 27
IE9 displaying selected items even when selected=""
- 28
IE9 입력 번호
- 29
IE9 이하의 Youtube API
몇 마디 만하겠습니다