IE7에서 CSS 문제가 발생했습니다.

간단한 웹 페이지가 있고 배너에 세 개의 이미지가 있습니다. 다른 resolution.my 솔루션이 Firefox와 Chrome에서는 작동하지만 IE7에서는 작동하지 않을 때 배너를 확장하고 싶습니다.IE7에서 CSS 문제가 발생했습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 

     #left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;} 
     .middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; } 
     #right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; } 
    </style> 
</head> 
<body style="margin:0px; padding:0px;"> 
    <form id="form1" runat="server">   
     <div id="container" class="middle" style="float:left;"> 
      <div id="left"></div> 
      <div id="middle" class="middle"></div> 
      <div id="right"></div> 
      <div id="content" style="clear:both; float:left;"></div> 
     </div> 
    </form> 
</body> 
</html>

어떤 아이디어가 있습니까?

미리 감사드립니다.

출처

2011-05-11 dinesh

를? 스크린 샷을 게시하거나 잘못된 스크린 샷을 링크 할 수 있습니까? –

왼쪽과 오른쪽 이미지가 화면의 왼쪽과 오른쪽 위치에 있어야하고 가운데 이미지가 화면 크기 (너비)에 따라 확장 (반복)되어야합니다. 문제는 IE7 @ 그림자 마법사 – dinesh

에서 오른쪽 이미지 바로 뒤에서 중간 이미지 반복입니다 JavaScript를 사용하고 중간 div 너비를 본문 너비에서 다른 두 div의 너비를 뺀 값으로 설정해야 할까 봐 걱정됩니다. –

.middle에 width 값을 퍼센트로 설정하십시오.

출처

2011-05-11 11:06:51

아니오. 작동하지 않습니다. : – dinesh

귀하의 예제를 사용하고이 하나 개의 방법으로 당신이 그것을 할 수있는 배너 아래의 모든 콘텐츠를 원하는 가정 : 정확히 문제가 무엇인지

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     body{ 
      margin:0px; 
      padding:0px; 
     } 
     #banner{ 
      background:url('image/banner_middle.jpg') ; 
      background-repeat:repeat-x; 
     } 
     #left{ 
      width:338px; 
      height:103px; 
      float:left; 
      background-image:url('image/banner_left.jpg'); 
      background-repeat:no-repeat; 
     } 
     #right{ 
      width:620px; 
      height:103px; 
      float:right; 
      background-image:url('image/banner_right.jpg'); 
      background-repeat:no-repeat; 
     } 
     .clearFloat{ 
      clear:both; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">   
     <div id="banner"> 
      <div id="left"></div> 
      <div id="right"></div> 
      <div class="clearFloat"></div> 
     </div> 
     <div id="content"> 
      Any content goes here 
     </div> 
    </form> 
</body> 
</html>

출처

2011-05-11 14:27:07 Patrik

왼쪽과 오른쪽 이미지가 화면의 왼쪽과 오른쪽 위치에 있어야하고 중간 이미지가 화면 크기 (너비)에 따라 확장 (반복)되어야합니다. 문제는 오른쪽 이미지 바로 뒤 중간 이미지 반복입니다. IE7에서 – dinesh

IE7에서 CSS 문제가 발생했습니다.

답변

관련 문제