2012-06-28 2 views
0

내부 텍스트가 추한 만드는 필터 그림자 속성입니다.인터넷 익스플로러 - 나는 (  탐색기   8 인터넷   익스플로러   7 인터넷) CSS를 다음을 통해 적용 인터넷   Explorer에서 상자 그림자와 사업부가

Enter image description here

그리고 그것은처럼 상자 그림자 속성없이 :

box-shadow:  0px 0px 15px #FF00CC; 
-o-box-shadow:  0px 0px 15px #FF00CC; 
-moz-box-shadow: 0px 0px 15px #FF00CC; 
-webkit-box-shadow:0px 0px 15px #FF00CC; 
zoom: 1; 
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0), 
     progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90), 
     progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180), 
     progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270), 
     progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff'); 
background-color:#FFFFFF; 
border:1px solid #FF00CC; 

하면 검은 색 텍스트 선명도를 잃고, 즉, 그것을 상자 그림자를 제공하지만, 내부 텍스트를 흐리게하고 추한하고있다 이 : 나는 DIV에게 상자 전어를 제공하는 외에 내부 텍스트가 정상 만들 수있는 방법

Enter image description here

오우?

답변

2

:

<div class="shadow-box"> 
    <div style="position:relative;">Lorem ipsum dosectetur adipisicing elit</div> 
    </div> 

    .shadow-box { 
     box-shadow:  0px 0px 15px #FF00CC; 
     -o-box-shadow:  0px 0px 15px #FF00CC; 
     -moz-box-shadow: 0px 0px 15px #FF00CC; 
     -webkit-box-shadow:0px 0px 15px #FF00CC; 
     zoom: 1; 
     filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0), 
       progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90), 
       progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180), 
       progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270), 
       progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff'); 
     background-color:#FFFFFF; 
     border:1px solid #FF00CC; 
    } 

그러나 인터넷

  탐색기   7 당신이 사용하는 경우 그림자는 글꼴에 클리어 속성을 제거 필터, 내 검색에 따라 CSS Box Shadow,875,636에

덕분에 어떤 수정이 나던.

+0

위대한 답변, 잘 작동합니다. 하지만 그것은 엄청난 양의 작업을 필요로한다는 것을 감안할 때 텍스트가있는 요소의 ms 필터를 명확하게 처리 할 것이라고 생각합니다. – foochow

-1

그림자가있는 빈 div을 만들고 다른 요소의 텍스트를 그 위에 놓을 수 있습니다. 음수 여백 또는 절대 위치를 사용할 수 있습니다.

그것은   탐색기   8 position:relative;와 컨텐츠 내부에 별도의 사업부에 배치하고 텍스트 다시 영광을 가지고에 의해 인터넷에 극복 할 수
+0

나는 내부 텍스트의 길이를 알지 못했다. 그 높이가 다르므로 그림자가있는 div의 줄 바꿈이 혼란에 빠지게된다. –

+0

ECMAscript로 div의 높이를 설정할 수있다. 이상한 해결책이지만, 나는 그것을 더 잘하는 방법을 모른다. –