2012-05-31 36 views
0

因此,我在本網站上工作,出於某種原因,有些頁面在Firefox和Opera中未正確對齊,但在Chrome,IE和Safari中工作正常。基本的結構是我有一個寬度,高度= 100%的div,在Div中我有一個表格來分隔頁面的各個部分。左邊和右邊的列應該填滿屏幕寬度的其餘部分,但是在Firefox和Opera中,列沒有寬度,但是在IE,Chrome和Safari中,它們會填充餘下的部分。在玩它時,如果我刪除兩個中間單元格的寬度參數,它會正確排列,但這會導致Chrome,IE和Safari中的文本對齊問題。如何在所有瀏覽器中填充列以填充頁面?頁面在firefox和opera中無法正確顯示

這裏是一個鏈接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> 
+0

爲什麼所有的內聯樣式? – PeeHaa

+0

你[使用同一個'id'兩次](http://validator.w3.org/check?uri=http%3A%2F%2Fits.truman.edu%2FInternational%2FMeet_A_Student.htm&charset=%28detect+automatically %29&DOCTYPE =內嵌&組= 0)。這可能是一個問題。 – Sparky

+1

**引用OP:** _「在Div內,我有一張表來分隔頁面的各個部分。」_ - 這就是'div'的用途。你有沒有試過把'div'放在你的'div'裏面? – Sparky

回答

0

「出於某種原因一對夫婦的網頁不會在Firefox正確地調整和歌劇」

你可以通過調整你的代碼的這一部分來解決這個問題:

更改此:

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

TO:

<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%; }

注:這會告訴該document100%一個height瀏覽器,從而引起100%bodybody>divheight延長,直到document結束。

+0

如果我將其更改爲相對,則會造成頁面長度的問題。我希望藍色部分向下延伸到屏幕的末端,當位置是絕對位置時它可以正常工作,但當設置爲相對時,它不會延伸到屏幕的底部。 –

+0

@Adam Wagenknecht,剛剛爲我的答案添加了**編輯**,並解決了特定問題。 – Zuul

+0

工作感謝! –

0

我建議你主要的div和機關作風以下:

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

OK和內容:你爲什麼有這麼多的div你的表裏面?在大多數情況下,使用表格會損害使用Div的必要性,所以我建議您取出表格中的所有div。如果您希望某些行爲類似於圖像等塊元素,請設置display:block或inline-block。 至於所有的尺寸:你定義了太多的寬度和高度。不要將像素的寬度分配給td標籤,圖像的大小將完成他們的工作。您可以指定它們的尺寸。試試這個,讓我知道。

+0

當我刪除位置:絕對參數時,它會阻止藍色擴展到屏幕底部(請參見下面的註釋)。 至於所有的div,我做了很多嘗試和錯誤,讓它看起來像我想要的方式,其中包括從我嘗試的東西不同的頁面複製和粘貼很多,我沒有機會回去並清理它,但這不應該導致我的問題。 沒有寬度的文本沒有正確地與中心單元格中的圖像排隊,就像我最初所說的大部分寬度將包含位於內部的其他對象 –

相關問題