0

だから私はこのサイトに取り組んでいますが、何らかの理由でいくつかのページが Firefox と Opera で正しく整列しませんが、Chrome、IE、および Safari では問題なく動作します。基本的な構造は、幅、高さ = 100% の div があり、Div 内にページのセクションを区切るためのテーブルがあることです。左側と右側の列は画面の幅の残りを埋める必要がありますが、Firefox と Opera では列に幅がありませんが、IE、Chrome、および Safari では残りを埋めます。真ん中の 2 つのセルの幅パラメーターを削除すると、正しく整列しますが、クロム、IE、および Safari でテキストの配置の問題が発生します。すべてのブラウザーでページを埋める列を取得するにはどうすればよいですか?

ここにリンクがあります http://its.truman.edu/International/Meet_A_Student.htm

ここに私のコードがあります、

<!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" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meet A Student</title>
<style type="text/css">
#outer {
    opacity: .5;
}
#img1 {
    opacity: .3;
}
#table1 {
    opacity: 1;
}
</style>
</head>

<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-    HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">

    <table style="width: 100%; height:100%; border-collapse:collapse">
        <tr>
            <td rowspan="4" style="background-color:#2BA7D0; margin-right:0px; height:100%;" id="outer" >
                &nbsp;
            </td>
            <td colspan="2" style="text-align: center; background-image: url('Pictures/Header_New.jpg');width:960px; height:100px" valign="bottom"  >
                <table style="width: 100%; border-collapse:collapse">
                    <tr>
                        <td style="width:20%"> <a href="/International/Home.htm">
                            <button  type="button" style="color: black;background: #2BA7D0; border:0; height:50px; width:100%"> 
                            <span style="font-family:Calibri; font-size:16pt;font-weight:bold"> 
                            Home 
                            </span>
                            </button> 
                        </a></td>
                        <td style="width:20%">  
                            <button  type="button" style="color:white; background:#FA7042; border:0; height:50px; width:100%;">
                            <span style="font-family:Calibri; font-size:16pt;font-weight:bold"> 
                            Meet A<br/> Student
                            </span>
                            </button>
                        </td>
                        <td style="width:20%"> <a href="/International/Available_Funds.htm"> 
                            <button type="button" style="border-style: none; border-color: inherit; border-width: 0; background: #2BA7D0; height:50px; width:100%"> 
                            <span style="font-family:Calibri; font-size:16pt;font-weight:bold; WORD-WRAP:break-word">
                            Available <br /> Funds
                            </span>
                            </button>
                        </a></td>
                        <td style="width:20%">  <a href="/International/Contact.htm">
                            <button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;"> 
                            <span style="font-family:Calibri; font-size:16pt;font-weight:bold"> 
                            Contact <br/> Truman
                            </span>
                            </button>
                        </a></td>
                        <td style="width:20%">  <a href="/International/Give.htm">
                            <button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;"> 
                            <span style="font-family:Calibri; font-size:16pt;font-weight:bold"> 
                            Give
                            </span>
                            </button>
                        </a></td>
                    </tr>
                </table>
            </td>
            <td rowspan="4" style="background-color:#2BA7D0; height:100%;" id="outer">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="width:480px" >
                <div>
                    <img alt="Wanding Shi" src="Pictures/Wanding Shi.jpg" style="float: left; margin-right:10px" width="258" height="389"/>
                    <div>
                        <p style="font-family:Calibri">
                            <span style="font-size:16pt"> 
                            Wanding Shi
                            </span><br />
                            Senior Business Major<br />
                            <br />
                            Home Country - China<br />
                            <br />
                            &quot;I enjoy the environment at Truman and have 
                            gotten involved in Phi Beta Lambda and the 
                            Bulldog Investment Fund. I am grateful for 
                            the opportunity to get to know students from 
                            different countries while at Truman.&quot;
                        </p>
                    </div>
                </div> 
            </td>
            <td style="width:480px">
                <div>
                    <img alt="Babajide Adio" src="Pictures/Babajide_Adio.jpg" style="float: left; margin-right:10px" width="240" height="389" />
                    <div>
                        <p style="font-family:Calibri">
                            <span style="font-size:16pt">Babajide 
                            Adio</span><br />
                            Senior Biology Major<br />
                            <br />
                            Home Country - Nigeria<br />
                            <br />
                            &quot;At Truman, I have enjoyed great opportunities 
                            to do research with professors since my freshman 
                            year. I have also gotten involved in a lot of 
                            student organizations including honors 
                            organizations, the African Students Association 
                            and Intramural Soccer and Basketball. The 
                            community is very friendly, and it is easy for 
                            every student to find his or her niche. Since 
                            international students don&#39;t qualify for many 
                            scholarships because of citizenship, it would be 
                            wonderful to receive support for international 
                            students.&quot;
                        </p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td  colspan="2" style="text-align: center; width:20%; background-image:url('Pictures/Footer_New.jpg')" class="style6" >
                <div id="table1"> <table id="table1" style="border-collapse:collapse; width:960px">
                <tbody>
                    <tr>
                        <td style="text-align:right;font-family:Calibri;margin-bottom:0px; ,margin-top:0px" valign="bottom" > 
                            <p style="font-family:Calibri;font-size:20pt; text-align:center;margin-bottom:0px;margin-top:0px" >
                                <a href="https://secure.truman.edu/alumni-s/contribution_new.asp" style="text-decoration:none;  color:black">
                                Make a Contribution 
                                <span style="color: #FA7042; font-weight:bolder">
                                TODAY!
                                </span>   
                                <span style="text-decoration: underline">
                                <br/>click here
                                </span>
                                </a>
                            </p>
                        </td> 
                        <td style="text-align:right;font-family:Calibri;"> 
                            <span style="font-size:14pt;font-weight:bold; padding-right:40px">
                            Truman State University 
                            </span> <br /> 
                            <span style="font-size:12pt">
                            Office of Advancement | McClain Hall 205&nbsp; <br />
                            &nbsp;100 E. Normal Avenue |Kirksville, MO 65301</span>
                        </td> 
                        <td style="font-family:Calibri;border-left-style: solid;border-left-width: 1px; margin-left:10px; text-align:left"> 
                            <span style="font-size:14pt;font-weight:bold;padding-left:50px">
                            <a href="www.truman.edu">
                            www.truman.edu
                            </a>
                            </span>
                            <br />
                            <span style="font-size:12pt; margin-left:5px;">
                            (660) 785-4133 or (800) 452-6678
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#2BA7D0; margin-right:0px; height:100%" id="outer" class="style3">
        <br />
        <br />
        </td>
    </tr>
</table>
</div>
</body>

</html>
4

2 に答える 2

0

「何らかの理由で、いくつかのページが Firefox と Opera で正しく配置されません」

コードのこの部分を調整することで、この問題をすばやく修正できます。

これを変える:

<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-    HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">

に:

<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-    HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:relative; height:100%; margin:0px auto">

問題は、指定するとposition:absolute;、通常のドキュメント ワークフローから要素が削除margin: 0 auto;されるため、 が無意味になることです。


私がしたことは、ブラウザによって「尊重」されるように変更するposition:absolute;ことでした。position:relative;margin:0 auto;


編集済み

htmlコメントで言及されている問題を解決するには、高さをに設定するだけです100%;

CSS

html { 高さ: 100%; }

注:これにより、にofdocumentがあることがブラウザに通知されるため、 とのが.height100%bodybody>div height100%document

于 2012-05-31T17:45:56.877 に答える
0

メインの div とボディ スタイルには次のことをお勧めします。

<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-       
HomepageColor.jpg'); clip:auto; overflow:hidden;">
<div style="margin:0px auto">.....

わかりました、内容について: テーブル内にこれほど多くの Div があるのはなぜですか? ほとんどの場合、テーブルを使用すると Div を使用する必要がなくなるため、テーブル内のすべての div を削除することをお勧めします。画像などのブロック要素のように動作させたい場合は、display: block または inline-block を設定します。すべての寸法について: 定義した幅と高さが多すぎます。ピクセル単位の幅を td タグに割り当てないでください。画像のサイズがその役割を果たします。寸法を指定できます。それを試して、私に知らせてください。

于 2012-05-31T18:24:34.350 に答える