CSS 브라우저 호환성 문제를 만드는 국경

-1

<table class='cardc'> 
    <tr> 
     <td rowspan='5' width='10%'> 
      <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/> 
     </td> 
     <td width='70%' colspan='3'>" 
       ."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font> 
     </td> 
     <td> 
      ".$record->fields->Email." 
     </td> 
    </tr> 
    <tr> 
     <td class='greyF' colspan='3'> 
      ".$record->fields->Country_of_Citizenship__c." 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class='greyF'>year</div>".$record->fields->Fellowship_year__c." 
     </td> 
     <td> 
      <div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c." 
     </td> 
     <td> 
      <div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c." 
     </td> 
    </tr> 
    <tr> 
     <td colspan='3'> 
       <div class='greyF'>Education</div>".$record->fields->Education__c." 
     </td> 
    </tr> 
    <tr> 
    </tr> 
</table>

CSS 태그 :

.cardc { 
    border: 5px outset white; 
    padding: 3px; 
    width:80%; 
}

그러나 제목이 말하는 것처럼, 나는 크로스 브라우저 문제가있어

, 국경의 전체 테이블을 덮을 것으로 예상되는 부분은 바닥에서 잘립니다.

테두리를 만드는 다른 방법에 대한 권장 사항은 무엇입니까?

수정 된 HTML은 모든 사람의 고민을 고려합니다. 테두리가 여전히 부적절하게 그립니다. 현재 셀 5 행에 걸쳐한다 때문에
는 here

출처

2012-08-05 Stupid.Fat.Cat

크로스 브라우저 문제는 무엇입니까 –

전체 테이블을 덮을 것으로 예상되는 경계는 맨 아래에 잘립니다. –

테이블 레이아웃을 사용하여 페이지의 스타일을 지정하는 경우 더 이상 좋은 아이디어가 아닙니다. CSS가 아직 부족한 오래된 학교 방식이었습니다. 의미론은 SEO를 위해 특별히 중요합니다. – Dan

는 그것은 잘못된 ROWSPAN 및 테두리 (당신이 jsFiddle에서 "정규화 CSS"를 선택하면 기본값) 붕괴의 조합에 의해 발생합니다. 이 기능을 끄거나 정확한 행 번호를 입력하면 경계선이 올바르게 그려집니다.

출처

2012-08-05 23:44:24 Neil

5 개 행의 임의의 가비지 문자열이있는 샘플을 시도했지만 여전히 경계선이 부러졌습니다. –

붕괴를 막아 보았는데 효과가있었습니다. 감사! –

<td rowspan='5' width=10%> 적어도 4 개 다음 행이 있는지를 나타내는 데모 참조. 이 행을 제공하지 않으므로 <td>이 테이블 밖으로 유출됩니다. 이 합병하는 나머지 4 개 행을 찾을 수 없습니다 아마도 때문에, 당신은 테이블의 아래쪽 테두리를 깨는 첫 td에 rowspan="5"이

<td style="width:10%"> 
    <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/> 
</td>

출처

2012-08-05 23:17:16 Zeta

rowspan은 괜찮습니다. 코드는 IE에서 올바르게 작동합니다. –

[HTML5] (http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#attr-tdth- 행 스파 스) 및 [HTML4] (http://www.w3.org/TR/html4/struct/tables.html#adef-rowspan)는 그렇지 않습니다. 그리고 IE를 제외한 모든 브라우저에서 코드가 손상되면 IE가 잘못된 값을 무시하기 때문입니다. 그건 그렇고 : 모든 행을 스팬하지 않으려면'rowspan = 0'을 사용할 수 있습니다. – Zeta

rowspan = 0 나를 위해 작동하지 않았다 : ( –

다음 rowspan 속성을 삭제합니다. 행 스팬을 제거하면 경계가 수정됩니다.

http://jsfiddle.net/Q3e9m/

출처

2012-08-05 23:17:59 Dan

rowspan 문제가되지 않습니다, 당신은 더 많은 td 태그를 계속 추가 할 수 있습니다 그리고 그냥 그들을 쌓아 올릴 수 있습니다. 현재 코드가 잘 IE에서 작동, 크롬에 몇 가지 문제가 –

는 우선, 코드에서 HTML로 오류를 수정하십시오. 코드에 따옴표가 없으며 태그의 스타일 속성이 사용되지 않습니다.

<html> 
<head> 
    <style> 
     .cardc { 
      border: 5px outset white; 
      padding: 3px; 
      width:80%; 
     } 
    </style> 
</head> 
<body> 
    <table class='cardc' style="height:100px;"> 
     <tr> 
      <td style="width:10%"> 
       <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
     </tr> 
    </table> 
</body>

출처

2012-08-05 23:19:05 Harangue

따옴표는 문제가되지 않습니다. –

공지 사항 rowspan 문제는 물론 비표준 태그 스타일도 수정했습니다.그리고 원래 코드는 놀라운 브라우저에서만 올바르게 해석되었을 수있었습니다. – Harangue

rowspan은 문제가 아니며 방금 확인했습니다. –

따옴표 및 단위가 부족합니다. 값이 픽셀인지 ems인지 지정해야합니다. 예를 들어 흰색 대신 #fff 또는 rgb (255 255 255)와 같은 색 코드를 사용하십시오.

출처

2012-08-06 00:02:19 Lawryenzo

색상이 아닌 대문자로 코드를 사용해 보았습니다. –

CSS 브라우저 호환성 문제를 만드는 국경

답변

관련 문제