IE7 상위 및 하위 배경 이미지 문제 표시

테이블 행에 x 축에서 반복되는 배경 이미지가있는 테이블을 IE7에 표시하는 데 문제가 있습니다 (테이블 형식 데이터에 사용되는 것이 걱정되지 않음). 테이블 분할 (이 경우에는 TH)에는 별도의 배경 이미지가 있으며 이는 전혀 반복되지 않습니다.IE7 상위 및 하위 배경 이미지 문제 표시

여기 http://cdn.bkit.ca/misc/juniors-table-problem.png

는 CSS입니다 : 여기

은 예입니다

<style> 

table, 
td, 
th, 
tr { 
    border: none; 
} 

table tr { 
    border-bottom: 1px solid #BEBEBE; 
} 

table td { 
    padding: 7px; 
    border-left: 1px solid #BEBEBE; 
    border-right: 1px solid #BEBEBE; 
} 

table th { 
    padding: 7px; 
    text-align: left; 
} 

table .header { 
    background-image: url(/images/layout/nav_background.png); 
    background-position: top; 
    background-repeat: repeat-x; 
    height: 37px; 
    border: none; 
    margin: 2px; 
} 

table .header th { 
    color: white; 
    font-weight: normal; 
    text-align: center; 
} 

table .header th.first { 
    background-color: transparent; 
    background-image: url(/images/layout/nav_left.png); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

table .header th.last { 
    background-image: url(/images/layout/nav_right.png); 
    background-repeat: no-repeat; 
    background-position: top right; 
    background-color: transparent; 
} 

</style>

그리고 여기에 HTML의 :

<table> 
    <tr class="header"> 
     <th class="first">a</th> 
     <th>b</th> 
     <th class="last">a</th> 
    </tr> 
</table>

내 CSS의 일부를 징계하지 마십시오 그것은 "스프레이와기도"CSS로 뭔가를 고치기를 바라고 있습니다.

그래서 나는 왜이 문제가 생겼는지 알지 못합니다. IE8에는이 동일한 문제점이 없습니다.

아이디어가 있으십니까?

출처

2009-11-19 bkorte

게시 한 이미지가 테이블의 첫 번째 두 셀의 스크린 샷 인 경우 문제는 아마도 첫 번째 셀 두 번째 행의 열의 크기가 조정된다는 것입니다. 따라서 0x0을 호출 할 수있는 셀은 열의 아래에있는 모든 셀의 내용으로 크기가 조정됩니다.

나는 반복 배경을 사용할 때 항상 똑똑하다고 생각할 필요가있다. 만약 내가 너라면 2 개의 개별 배경 이미지를 만들 것이다. (이 게시물의 하단에있는 이미지를 확인해 보자. 그것은 내 코드를 깨뜨린다 ...). 배경을지지 않습니다 tr로 tr 요소에서

제거 배경 :

table .header { 
     background:none 
     height: 37px; 
     border: none; 
} 
table .header th.first { 
     background: url(/images/layout/[my-image-2].png) left no-repeat; 
} 

table .header th.last { 
     background: url(/images/layout/[my-image-2].png) right no-repeat; 
} 

table .header th.middle { 
     background: url(/images/layout/[my-image-1].png) repeat-x; 
} 

<table> 
    <tr class="header"> 
      <th class="first">a</th> 
      <th class="middle">b</th> 
      <th class="last">a</th> 
    </tr> 
    <tr> 
     <td>this cell is resizing cell above</td> 
     <td>content</td> 
     <td>this cell is resizing cell above</td> 
    <tr> 
</table>

우리가 여기서하고있는 것은 :

그런 다음,이 스타일을 사용합니다.

가운데 부분에 배경 번호 2을 설정하고 x 방향으로 반복하십시오.
배경 번호 1을 .first 세포에 사용하고 왼쪽으로 정렬하고 .last에서 동일하게하고 오른쪽에 맞 춥니 다.

.first 및 .last이 내 예제 배경보다 길면 단순히 이미지를 확장 할 수 있습니다.

이렇게하면 문제가 해결됩니다.

출처

2009-11-20 00:21:22 rochal

첫 번째/저급 클래스가 tr 배경을 재정의 할 수 있습니다. 왼쪽/오른쪽 png의 너비를 확장하여 전체 셀을 덮을 수 있도록 확장 할 수 있습니까?

출처

2009-11-19 23:45:21

IE7 상위 및 하위 배경 이미지 문제 표시

답변

관련 문제