Firefox1 픽셀 버그 border-collapse,해결 방법?

StackOverflow https://stackoverflow.com/questions/1035706

  •  10-07-2019
  •  | 
  •  

문제

이 있습에 대한 해결 방법이 다음과 같은"1 픽셀 왼쪽에"버그?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

그것은 다음과 같습니다:

Firefox CSS bug

어떤 순수 CSS 솔루션을 이?

편집

내가 조금 불분명에 대한 내 테이블 그래서 여기에 그것은 다시:

와 border-collapse:

Firefox CSS bug

와 cellspacing="0"국경없이 축소로는 제안:

Firefox CSS bug

그래서 지금의 테두리 내부에 내 테이블 두 배로, 하지만 내가 원하는 1px 국경 간이 있습니다.

제가 1px 국경 테이블에서 내가 끝:

Firefox CSS bug

테두리는 여전히 배가 내부에이 있습니다.

내가 설정할 수 있지만 오른쪽 및 아래쪽 국경을 위해 모든 TD,TH 왼쪽 국경을 위한 첫 번째 매-아이 TR 를 달성하고 싶지만 제가 생각하기로는 간단한 방법이 있을까?

도움이 되었습니까?

해결책

제 border-collapse 사용 cellspacing=0 대신 합니다. 

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

그런 일이기 때문에 설정할 때 border-collapse:collapse,파이어 폭스 2.0 두고 국경의 외부로 tr.다른 브라우저 넣어 내부에 있습니다.

설정 귀하의 국 폭 10px 코드에서는 무엇을 보는 것은 정말 일어나고 있다.

편집 후 OP 편집

할 수 있는 사용자의 테이블은"경계"이다.배경 색상을 설정 테이블에 있습니다.설정 td 및 제 색다.사용자 cellspacing=1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

다른 팁

하는 것을 선호하는 사람들을 위해 계속 프레젠테이션의 태그,또는 권한이 없는 태그,다음은 순수하게 CSS 솔루션입니다.실행으로 이 문제를 신고 테스트하는 이 솔루션 FF3.5,IE6,IE7,IE8,Safari4,오페라 10,Google Chrome. 

table { border-spacing: 0; *border-collapse: collapse; }

이 설정합니다 테이블에 사용하는 국경 간격에서 모든 브라우저(을 포함한 범죄자,파이어폭스).다음 사용하 CSS 스타 해킹을 제시 border-collapse 규칙만 IE,지 않는 제대로 적용 국경 간격(당신은 또한 포함할 수 있습니다 별도의 스타일 시트를 위한 IE 조건부 의견을 좋아하지 않는 경우에는 해킹).

당신이 선호하는 경우 사용하여 세포의 간격에 의하여,모든 수단을 사용합니다.이것은 단순히 제공하는 대안으로 사용하는 방법 CSS.

이 문제는 더 이상 존재하지 않습니다.Firefox 에서 47.0.1,다음 CSS 지 않는 전시 하나의 픽셀은 문제가:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

우리는 또한 깨끗하는 한 픽셀의 테두리 작업에 의존하지 않고 작업의 구현 border-collapse, 은 다음과 같습니다.

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

당신이 볼 무엇을 하고 있는가?트릭은 우리가 우리만 위쪽 및 왼쪽 국경에서 셀:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

이 테이블 잎지 않고 오른쪽 및 아래쪽 가장자리:우리는 스타일에 사람들 table 

+------+-------               |         +-------+------+ 
| cell | cell                 |         | cell  | cell |
+------+-------   +           |    =    +-------+------+
| cell | cell                 |         | cell  | cell |
|      |             ---------+         +-------+------+

이 border-spacing: 0 은 필수적인 그렇지 않으면 이러한 라인을 연결되지 않습니다.

table{border-spacing:0;border-collapse:collapse;}/*작품에서 FF3.5*/

최 CSS 유일한 해결책:

추가

td {
    background-clip: padding-box
}

더 많은 정보: https://developer.mozilla.org/en-US/docs/CSS/background-clip

감사@medoingthings

table { border-spacing: 0; *border-collapse: collapse; }

이 작동하지 않는 나를 위해서 FF31.이후 나는 다른 색깔에 대한 thead 및 tbody 세포 표 배경색 속 작동하지 않는,too.유일한 솔루션은 다음과 같다:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

나는 생각하지 않는 들"1px 왼쪽 버그,"당신은 코드를 업로드하는 곳 그래서 우리는 그것을 확인할 수 있는지 확인하지는 않지만"나는 뭔가를 놓친 어딘가에"업그레이)또한 제안을 통해 실행 당신의 마크업과 함께 불을 지르고 있는지 확인하려면 다른 것 awry.

내가 달렸으로 이 문제지만 제 경우에 함께 할 수 있다 테이블에는 중첩된 div 내에서 설정하면 overflow:hidden.나는이 일했다.

실행으로 이 문제와 같습니다.나는 사용:

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

기본적으로 사기에 의해 국경을 사용하여 배경 색상.따라서 막중 내부 테두리입니다.

나의 솔루션은 다음과 같습니다.

  1. 제거 border-collapse, border 고 border-spacing 에서 CSS.

  2. 추가 이 JavaScript 코드:

    $('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');

솔직히 말해서,왜 그것을 작동합니다.JQuery 마법입니다.

하고 안락하게 꾸며져 있습니다 이 오늘입니다.제공하거나 우회하는 방법 나를 위해 일하지 않았다,그래서 나는 내 자신을 발견:

table { border: 1px solid transparent; border-collapse: collapse; }

이 방법은,당신은 붕괴 테두리,두 배경,그리고 모든 경계 내에서 당신의 욕망,브라우저없이 특정 규칙이 있습니다.어떤 단점이 없습니다.

또한 저는 이 문제로 실행되는 전체 솔루션은 매우 간단에서 당신의 asp:트를 추가 

GridLines="None"

와 라인에 사라 파이어 폭스 아 css 수정이 필요합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top