IE9의 box-shadow는 올바른 CSS를 사용하여 렌더링되지 않고 Firefox, Chrome에서 작동합니다.
플로팅 모달 상자 유형을 시뮬레이션하려고하지만 IE9 및 해당 상자 그림자 구현에 문제가 있습니다.
다음은 문제를 복제 할 수있는 코드 요약입니다.
<html>
<head>
<title>Sample page</title>
<style>
.content-holder {
border-collapse: collapse;
}
.back {
background-color: #a8c0ff;
padding: 100px;
}
.inner {
background-color: #fff;
text-align: center;
padding: 50px;
box-shadow: 0px 0px 20px #000;
}
</style>
</head>
<body>
<table class="content-holder">
<tr>
<td>
<div class="back">
<div class="inner">
<h2>Heading</h2>
<p class="subtext">Some text here</p>
<p>More text</p>
<a class="button" href="#">A button</a>
</div>
</div>
</td>
</tr>
</table>
</body>
Firefox / Chrome 등에서는 잘 작동하지만 IE9는 그림자를 표시하지 않습니다. 삽입 된 그림자로 변경할 수 있고 제대로 표시되지만 외부 그림자는 계속해서 나를 피합니다.
이 그림자 문제에 대해 밝힐 수있는 사람이 있습니까?
댓글에서 (내가 아님) 발견했듯이 작동하지 않는 border-collapse: separate;요소에 추가해야합니다 box-shadow.
그리고 내 원래 대답에서 .NET과 같은 첫 번째 줄에 유효한 doctype이 있는지 확인하십시오 <!DOCTYPE html>. F12를 눌러 개발자 도구를 불러오고 IE9 모드 (또는 그 이상)가 box-shadow작동하는 데 필요하므로 사용 중인지 확인하십시오 .
이 문제를 확인하고 일부 사람들이 놓칠 수 있기 때문에 @Arowin의 최종 해결 방법을 두 번째로 확인하십시오- border-collapse:separate;영향을받는 것에 추가하십시오-IE9 <div>는 이제 a <div>가 <table>with border-collapse:collapse;세트에 포함될 때 올바른 그림자를 표시합니다 . 감사!
IE9 입력 상자 그림자 버그 솔루션이이 버그에서 작동합니다.
input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
border-collapse: separate; 테이블에서이 문제를 해결하려면 추가해야합니다.
I had athe same issue. Actually IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables with shadow - use cellspacing=0 then it works - still: bugger IE
The border-collapse: separate; only partially solved it for me. We have background-color added to the rows (tr) and shadow under the row that is selected (and expanded).
The background-color blocks the shadow as it seems to be a z-index kind issue. Anyway we solved it with the rgba value for the color. We choose darker row color and used 20% for alpha value so the shadow underneat could be shown.
table { border-collapse: separate;}
tr:nth-child(even) { /* odd color transparent */
/* background-color: someothercolor; */ /*shadow did not display thru solid color */
background-color: rgba(168,163,136,.2);
}
In my case, IE 9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
In my case nothing helped. After hours of debugging I found that The following meta tag was the problem:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Yes, if you do some resetting for several html elements in your css like (I myself just copy and paste stuff from old projects, never thinking about consequences :D):
html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul,
li, legend, table, tbody, tr, th, td {
order:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
border-spacing: 0;
border-collapse: collapse;
}
well... cut that
out of there and add it as a separateborder-collapse: collapse
table, tbody, tr, th, td {
border-collapse: collapse;
}
... so it's not applied to your div, p, span, img or wherever you need the shadow to be.
I had a div that was inside of a table cell. Using border-collapse:separate on the div solved the problem for me.
In my case switching from Transitional to Strict XHTML-doctype helped.
Removing border-collapse from the container-table ALSO helped.
This meta tag solved it for me. It has also solve other strange IE issues that don't occur in Chrome and Firefox:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
'program story' 카테고리의 다른 글
| ASP.NET MVC의 Page.ResolveUrl에 해당하는 것은 무엇입니까? (0) | 2020.10.29 |
|---|---|
| Java에서 인터페이스의 인스턴스를 만들 수 있습니까? (0) | 2020.10.29 |
| android.intent.action.MAIN의 의미는 무엇입니까? (0) | 2020.10.29 |
| Entity Framework SaveChanges () 대 SaveChangesAsync () 및 Find () 대 FindAsync () (0) | 2020.10.29 |
| Visual Studio의 소스 제어 통합은 Perforce와 어떻게 작동합니까? (0) | 2020.10.29 |