0

所以我在这个网站上工作,由于某种原因,一些页面在 firefox 和 opera 中没有正确对齐,但在 chrome、IE 和 Safari 中工作得很好。基本结构是我有一个宽度为 100% 的 div,在该 div 中我有一个表格来分隔页面的各个部分。左侧和右侧的列应该填满屏幕宽度的剩余部分,但在 Firefox 和 Opera 中,这些列没有宽度,但在 IE、Chrome 和 Safari 中,它们填满了剩余部分。在使用它时,如果我删除两个中间单元格上的宽度参数,它将正确对齐,但这会导致 chrome、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

我为您建议以下主要 div 和 body 样式:

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

好的,对于内容:为什么你的桌子上有这么多的 Div?在大多数情况下,使用 table 就不需要使用 div,所以我建议你把 table 中的所有 div 都取出来。如果您希望某些东西表现得像图像等块元素,请设置 display: block 或 inline-block。至于所有尺寸:您定义了太多的宽度和高度。不要将宽度(以像素为单位)分配给 td 标签,图像的大小将完成它们的工作。您可以指定它们的尺寸。试试看,让我知道。

于 2012-05-31T18:24:34.350 回答
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%; }

注意:这将告诉浏览器document有一个heightof 100%,从而导致bodyandbody>div height延伸100%document.

于 2012-05-31T17:45:56.877 回答