Firefox에 표시되지 않는 테두리, 테이블의 테두리 축소, 위치 : tbody의 상대 또는 셀의 배경색
다음 HTML을 고려하십시오.
<html>
<head>
<style>
TABLE.data TD.priceCell
{
background-color: #EEE;
text-align: center;
color: #000;
}
div.datagrid table
{
border-collapse: collapse;
}
div.datagrid table tbody
{
position: relative;
}
</style>
</head>
<body>
<div id="contents" class="datagrid">
<table class="data" id="tableHeader">
<thead>
<tr class="fixed-row">
<th>Product</th>
<th class="HeaderBlueWeekDay">Price</th>
<th class="HeaderBlueWeekDay">Discount</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic;">
<td>Keyboard</td>
<td class="priceCell">20</td>
<td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>마지막 셀에는 인라인 스타일에 왼쪽 및 오른쪽 테두리가 있습니다. 당신 (또는 적어도 나는)이 이것이 보일 것이라고 기대할 것입니다. IE에서는 이것이 사실입니다. 그러나 Firefox (6)에서는 그렇지 않습니다. 다음 방법으로 해결할 수 있습니다.
div.datagrid table tbodyCSS에서 상대 위치 제거- 변경
div.datagrid table tbody에div.datagrid tableCSS의에 - CSS 에서
background-coloron 제거table.data td.priceCell - CSS 에서
border-collapseon 제거div.datagrid table
이것은 우리 코드의 단순화 된 버전입니다. 우리는 또한 그것을 해결했습니다 (옵션 2 선택). 그러나 내가 궁금한 것은 다음과 같습니다.
- Firefox의 버그입니까?
- IE의 버그입니까?
특히 : CSS가있는 그대로 Firefox가 테두리를 표시하지 않는 이유는 무엇입니까?
이것은 나에게 Firefox 버그처럼 보입니다. 배경은 경계선 위에 그림을 그리고 있습니다. 반투명 배경색을 사용하면 알 수 있습니다.
https://bugzilla.mozilla.org/show_bug.cgi?id=688556을 제출했습니다.
방금이 문제가 발생하여 CSS 전용 솔루션에 도달했습니다 . 요소에 추가 background-clip: padding-box하기 만하면 td됩니다.
자세한 내용은 https://developer.mozilla.org/en-US/docs/CSS/background-clip 문서를 참조하십시오.
모든 것을 한곳에 모으십시오.
접힌 테두리가있는 테이블 내부에 상대 위치가있는 셀이있을 때 문제가 발생합니다 (보리스가 지적하고 버그 https://bugzilla.mozilla.org/show_bug.cgi?id=688556 를 채웠습니다 ).
이것은 user2342963 (셀에 background-clip 추가 : padding-box)에 표시된대로 CSS를 사용하여 쉽게 해결할 수 있습니다.
You can see the problem (with Firefox) and the fix here: http://jsfiddle.net/ramiro_conductiva/XgeAS/
table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}
<table class="tableSeparate">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative cellRelativeFix">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
This is a bug in firefox and hopefully they fix it soon. But in the mean time I was able to fix this issue for me by setting my td cells to position: static. Hopefully that will help someone else.
td {
position: static;
}
Another possible solution is to correct colspan errors in your table markup.
Apparently can colspan errors cause the same effects with hidden borders when using border-collapse: collapse;
I was directed to the right solution through http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.
In my table I had written <th colspan="9"> when there was only 8 columns.
That caused error (hidden right border) in
- Chrome 51.0.2704.103 m (64-bit)
- Vivaldi 1.2.490.43 () (32-bit)
but rendered with right borders in
- Firefox 44.0.2
- IE 11 (11.420.10586.0)
- Edge 25.10586.0.0
'Development Tip' 카테고리의 다른 글
| NavigationView 내에서 항목 배경 및 항목 텍스트 색상을 사용자 지정하는 방법은 무엇입니까? (0) | 2020.10.22 |
|---|---|
| 연락처 프레임 워크를 사용하여 iOS 9에서 모든 연락처 레코드를 가져 오는 방법 (0) | 2020.10.22 |
| Retrofit GSON은 json 문자열에서 java.util.date로 날짜를 직렬화합니다. (0) | 2020.10.22 |
| iPad : PNG 크러시 오류 (0) | 2020.10.22 |
| Git CLI : 사용자 이름에서 사용자 정보 가져 오기 (0) | 2020.10.22 |