파이어 폭스와 IE에서 테이블 셀을 넘기위한 테두리가 왼쪽으로 됨

테이블 셀에 왼쪽 테두리를 주려고합니다. Chrome에서는 정상적으로 작동하지만 Firefox와 IE에서는 경계가 표시되지 않습니다.파이어 폭스와 IE에서 테이블 셀을 넘기위한 테두리가 왼쪽으로 됨

설명서에서 왼쪽 및 오른쪽 테두리가 널리 지원되지 않지만 어쩌면 해결 방법이 있거나 코드에서 잘못된 것이 있습니다.

이상한 점은 왼쪽 테두리와 아래쪽 테두리가 모두있는 내 테이블에 둥근 테두리가 있고 각 브라우저에서 잘 보입니다.

<tr class="Panel_Middle_Row"> 
    <td class="Panel_Middle_Left_Cell" width="20"></td> 
    <td class="Panel_Middle_Middle_Cell">blablabla</td> 
    <td class="Panel_Middle_Right_Cell"></td> 
</tr>

그리고 따라 CSS :

.Panel_Middle_Left_Cell { 
    width: 20px; 
    border-left-style:solid; 
    border-left-color:#CCC; 
    border-left-width:2px; 
} 
.Panel_Middle_Right_Cell { 
    width: 20px; 
    border-right-style:solid; 
    border-right-color:#CCC; 
    border-right-width:2px;*/ 
}

당신은 예를 들어 here을 찾을 수 있습니다

다음은 관련 코드입니다.

출처

2012-10-16 Mats Raemen

행에 넣어 ?? border-left처럼 속기를해라 : 2px solid #ccc; –

td은 비어 있으며 표시되지 않습니다.  을 추가하십시오.

또는 테이블 클래스에이 추가 empty-cells: show;

출처

2012-10-16 13:25:14 Kraz

"빈 셀 : 표시;"를 추가하십시오. 참으로 FF를 위해 일합니다, 고마워요! 하지만 IE에서 아무런 차이가 없습니다 –

을 사용해 보셨습니까? 빈 셀은 quirk 모드가 아닌 경우 IE8 +에서만 작동합니다 (웹 페이지가 quirkmode에 속합니다. IE6_에 대해 _code를 지정하지 않으면 doctype을 페이지에 추가해야합니다.) – Kraz

정말 감사합니다! –

이 시도 :

<!DOCTYPE html> 
<html> 
<head> 
<style>  
td.Panel_Middle_Left_Cell { 
    width: 20px; 
    border-left-style:solid; 
    border-left-color:#CCC; 
    border-left-width:2px; 
} 

td.Panel_Middle_Right_Cell { 
    width: 20px; 
    border-right-style:solid; 
    border-right-color:#CCC; 
    border-right-width:2px; 
} 
</style> 
</head> 

<body> 
<table> 
<tr class="Panel_Middle_Row"> 
    <td class="Panel_Middle_Left_Cell">jcjgcjgc</td> 
    <td class="Panel_Middle_Middle_Cell">blablabla</td> 
    <td class="Panel_Middle_Right_Cell"></td> 
</tr> 
</table> 
</body> 
</html>

출처

2012-10-16 13:29:21

파이어 폭스와 IE에서 테이블 셀을 넘기위한 테두리가 왼쪽으로 됨

답변

관련 문제