3
스크롤을 사용하여 div 안에 TH에 호버 선택기를 사용하면 부모 div 크기가 조정됩니다. 마우스 오버 효과가 트리거 될 때마다 div는 한 줄 씩 증가합니다.THW에 대한 스크롤 막대가있는 div가 왜
다른 브라우저에서 이것을 테스트했지만 IE 9에서만이를 재현 할 수 있습니다. 누구든지이 문제를 해결할 방법이 있습니까?
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />
<style>
.testScroller {
max-width: 200px;
overflow-x: auto;
background-color: green;
}
.testHeader:hover {
background-color: lightBlue;
}
</style>
</head>
<body>
<div class="testScroller">
<table >
<tr >
<th class="testHeader">header 0</th>
<th class="testHeader">header 1</th>
<th class="testHeader">header 2</th>
<th class="testHeader">header 3</th>
<th class="testHeader">header 4</th>
<th class="testHeader">header 5 </th>
</tr>
<tr >
<td >0</td>
<td >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
</table>
</div>
</body>
</html>
내 실제 CSS는이 링크를 참조하십시오 더 복잡한. 내가 게시 한 CSS는이 문제를 재발견하는 데 사용할 수있는 가장 간단한 코드였습니다. .testScroller { 최대 너비 : 200px; overflow-x : auto; 배경색 : 녹색; \t} \t .testHeader { \t \t 텍스트 정렬 : 가운데; \t \t 커서 : 포인터; \t \t 색상 : 흰색; \t \t background-color : green; \t} \t .testHeader : hover { \t \t 텍스트 정렬 : 가운데; \t \t 커서 : 포인터; \t \t background-color : lightBlue; \t \t 색상 : # 1d5987; \t} – JohnELaw
흠. 그것은 분명히 내가 생각했던 것보다 더 복잡하다. 내가 쓴 것은 호버 스타일의 다른 속성을 설정하지 않는 경우에만 작동합니다.IE 9가 완전히 지원하지 않는 max-width 및 overflow-x 속성으로 인해 발생한 문제입니다. 더 나은 솔루션 일 수있는 CSS없이 CSS를 재 설계 할 수 있다면. – adhocgeek
이것은 일종의 측정 기능이 잘못되어 발생한 것으로 보입니다. 테이블 높이를 고정 높이로 설정하면 문제가 사라집니다. – adhocgeek