页面无法在Firefox和Opera中正确显示

时间:2012-05-31 17:39:18

标签: html css

所以我在这个网站上工作,由于某种原因,一些页面在firefox和opera中没有正确对齐,但在chrome,IE和Safari中工作得很好。基本结构是我有一个宽度为div的div,高度= 100%,在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>

2 个答案:

答案 0 :(得分: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; “尊重”


EDITED

要在评论中解决上述问题,您只需将html身高设置为100%;

<强> CSS

html {   身高:100%; }

注意:这会告诉浏览器document height 100% body,导致body>div和{{1} } height的{​​{1}}延长到100%的结尾。

答案 1 :(得分: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标签,图像的大小将完成它们的工作。您可以指定其尺寸。试试看,让我知道。