0

HTMLコードがあります。3 行 3 列の表があります。各セルにはテキストがあります。すべてが絶対に配置されています。この 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>

自動生成されたコードであることをお知らせするために、絶対配置を使用するしかありません。また、有効でない部分や意外に見える部分もあるかもしれませんが無視してください。何か案は ？

4

1 に答える 1

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>

以下はie6のスクリーンショットです

ここに画像の説明を入力

リクエストに応じて、以下の修正されたコードを参照してください。

<!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>
于 2012-07-22T08:14:33.187 に答える