2012-07-22 2 views
0

HTML 코드가 있습니다. 세 개의 행과 세 개의 열이있는 테이블이 있습니다. 각 셀에는 텍스트가 있습니다. 모든 것이 절대적으로 중요합니다. 이 HTML을 여러 브라우저에서 볼 때 모든 브라우저는 IE를 제외하고 올바르게 표시합니다. 아래는 문제가있는 HTML 코드의 일부입니다. 알아 차리면 IE는 모든 후속 행에서 텍스트를 위로 이동시킵니다. 나머지 브라우저에는이 문제가 없습니다.테이블 안의 절대 위치 텍스트가 올바르게 정렬되지 않습니다.

<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<document xmlns="http://www.w3.org/1999/xhtml"> 
<meta name="Author" content="***"/> 
<meta name="DocumentName" content="Page"/> 
<meta name="Date" content="07/21/2012"/> 
<notice name="Page"> 
<html> 
<head> 
<style type="text/css"> 
div.Page61989 {} 
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;} 
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;} 
</style> 
</head> 
<body lang="EN-US" link="blue" vlink="purple"> 
<div class="Page61989" style="position:relative;height:1056px;width:816px;"> 
<table class="normal" style="width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;"> 
    <tr> 
     <td style="height:31.000px;width:192.000px;;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1" style=";position:absolute;top:16.00px;left:0.00px;" >square corners.</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:192.00px;" >Cell 2 Row 1</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:384.00px;" >Cell 3 Row 1</span></p> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:0.00px;" >Cell 1 Row 2</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:192.00px;" >Cell 2 Row 2</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:384.00px;" >Cell 2 Row 3 This table has a</span><span class="f1" style=";position:absolute;top:375.00px;left:384.00px;" >square corner defined.</span></p> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:0.00px;" >Added another row</span></p> 
     </td> 
     <td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:192.00px;" >added another row</span></p> 
     </td> 
     <td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:384.00px;" >added another row</span></p> 
     </td> 
    </tr> 
</table><br style="clear:left;"/> 
</div> 
</body> 
</html> 
</notice> 
</document> 

자동으로 생성 된 코드를 알려주므로 옵션이 없어도 절대 위치 지정을 사용할 수 있습니다. 또한 일부 부품이 유효하지 않거나 이상하게 보일 수도 있지만 무시하십시오. 어떤 아이디어? 도움이된다면

+0

왜 .000px? 귀하의 전체 마크 업이 잘못되었습니다 .. –

+0

외국인이 옳습니다. 아래의 답변에 표시된대로 잘못된 인라인 스팬 스타일을 모두 삭제하기 만하면됩니다. 예 : ''그것을 '로 변경하면 괜찮을 것입니다. – Stano

답변

1

이 작업을 시도 할 수 있습니다 :

<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<document xmlns="http://www.w3.org/1999/xhtml"> 
<meta name="Author" content="***"/> 
<meta name="DocumentName" content="Page"/> 
<meta name="Date" content="07/21/2012"/> 
<notice name="Page"> 
<html> 
<head> 
<style type="text/css"> 
div.Page61989 {} 
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;} 
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;} 

.tc{ 
    border:1px solid #FF9900 
    } 

</style> 
</head> 
<body lang="EN-US" link="blue" vlink="purple"> 
<div class="Page61989" style="position:relative;height:1056px;width:816px;"> 

<table cellspacing="0" class="normal" style="width:578px;position:absolute;top:328px;left:120px;"> <tr> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    </tr> 
    <tr> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    </tr> 
    <tr> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    <td class="tc">One-One</td> 
    </tr> 
</table> 




</table><br style="clear:left;"/> 
</div> 
</body> 
</html> 
</notice> 
</document> 

아래

enter image description here

아래에 귀하의 요청에 따라 코드를 수정 참조 6으로 스크린 샷을합니다.

<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<document xmlns="http://www.w3.org/1999/xhtml"> 
<meta name="Author" content="***"/> 
<meta name="DocumentName" content="Page"/> 
<meta name="Date" content="07/21/2012"/> 
<notice name="Page"> 
<html> 
<head> 
<style type="text/css"> 
div.Page61989 {} 
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;} 
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;} 
</style> 
</head> 
<body lang="EN-US" link="blue" vlink="purple"> 
<div class="Page61989" style="position:relative;height:1056px;width:816px;"> 
<table class="normal" style="width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;"> 
    <tr> 
     <td style="height:31.000px;width:192.000px;;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1" style=";position:absolute;top:16.00px;left:0.00px;" >square corners.</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:192.00px;width:192.000px; ">Cell 2 Row 1</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:384.00px;width:192.000px;" >Cell 3 Row 1</span></p> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:0.00px;" >Cell 1 Row 2</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:192.00px;width:192.000px;" >Cell 2 Row 2</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:384.00px;width:192.000px;" >Cell 2 Row 3 This table has a</span><span class="f1" style=";position:absolute;top:46.00px;left:384.00px;width:192.000px;" >square corner defined.</span></p> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:0.00px;width:192.000px;" >Added another row</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:192.00px;width:192.000px;" >added another row</span></p> 
     </td> 
     <td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" > 
      <p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:384.00px;width:192.000px;" >added another row</span></p> 
     </td> 
    </tr> 
</table><br style="clear:left;"/> 
</div> 
</body> 
</html> 
</notice> 
</document> 
+0

나는 왜 내가 제안한 것을 할 수 없는지에 대한 위의 내 의견을 주었다. – nav

+0

IE 7 이상에서 HTML 파일을 봅니다. –

+0

IE9에서 체크하고 잘못 표시했습니다. 불행히도 대부분의 고객은 IE를 사용합니다. ;-) – nav

관련 문제