1. 首頁
  2. 問答
  3. Div和表格在Firefox中不能正常工作

Div和表格在Firefox中不能正常工作

2015-02-09 68 views
0

我正在使用流體佈局通過Dreamweaver製作一個微型網站。在這裏面，我有我的表內標題和橫幅，像這樣一個div下：不幸的是Div和表格在Firefox中不能正常工作

banner in Chrome

，在：

<div id="divHeader"> 
<table cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <tbody> 
     <tr> 
      <td style="width: 30px;"></td> 
      <td style="vertical-align: middle; font-size: 1.3rem; font-weight: bold;"> 
       <p><span>Move Toward </span> <span class="hdr">Zero Unplanned Downtime</span></p> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" style="text-align: center;"> 
        <img src="images/Mining_site_1192x181-12.png" alt=""/> 
      </td> 
     </tr> 
    </tbody> 
    </table> 
</div>

在大多數瀏覽器，這個效果很好（包括移動瀏覽器）火狐，它的顯示是這樣的：

banner in Firefox

當我使用內置的檢查Elemet，這是我看到我Ñ火狐：

Firefox Inspect Element

出於某種原因，該表被DIV元素外顯示。該表中沒有與之相關聯的CSS類，並以此爲一樣，這是同級車divHeader的CSS：

#divHeader { 
    font-family: Arial; 
    background-color: #F89329; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #fff; 
    line-height: 1rem; 
    border: none; 
}

是否有與在Firefox專區內表的問題嗎？如果是這樣，什麼是一個好的解決方法？

這裏是我的CSS代碼：

@charset "utf-8"; 
/* Simple fluid media 
    Note: Fluid media requires that you remove the media's height and width attributes from the HTML 
    http://www.alistapart.com/articles/fluid-images/ 
*/ 
img, object, embed, video { 
    max-width: 100%; 
} 

a { 
    text-decoration: none; 
} 

a: hover { 
    color: #F59D51; 
    text-decoration: none; 
} 

/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

/* 
    Dreamweaver Fluid Grid Properties 
    ---------------------------------- 
    dw-num-cols-mobile:  4; 
    dw-num-cols-tablet:  8; 
    dw-num-cols-desktop: 12; 
    dw-gutter-percentage: 25; 

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design 

    and Golden Grid System by Joni Korpi 
    http://goldengridsystem.com/ 
*/ 

.fluid { 
    clear: both; 
    margin-left: 0; 
    width: 100%; 
    float: left; 
    display: block; 
} 

.fluidList { 
    list-style:none; 
    list-style-image:none; 
    margin:0; 
    padding:0;   
} 

/* Mobile Layout: 480px and below. */ 

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 86.45%; 
    padding-left: 0.75%; 
    padding-right: 0.75%; 
    margin: auto; 
    clear: none; 
    float: none; 
    background-color: #fff; 
} 

.zeroMargin_mobile { 
    margin-left: 0; 
} 

.hide_mobile { 
    display: none; 
} 

#divEPMLogo { 
    background-color:#fff; 
} 

#divHeader { 
    font-family: Arial; 
    background-color: #F89329; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #fff; 
    line-height: 1rem; 
    border: none; 
} 

#divHeader td.tdBanner { 
    background-image: url(../images/Mining_site_v2_Banner480.png); 
    background-position: bottom; 
    background-repeat: no-repeat; 
    background-size: contain; 
    height: 181px; 
    max-width: 480px; 
    margin: 0px; 
} 

#divSubheader { 
    font-family: Arial; 
    background-color: #fff; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #4D4F44; 
    line-height: 1.3rem; 
    border: none; 
} 

div.divCnt { 
    width: 100%; 
    border: none; 
} 

#content header { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #4D4F44; 
    font-family: Arial; 
} 

#content article { 
    font-size: 1rem; 
    color: #818183; 
    font-family: Arial; 
} 

#content hr { 
    width: 100%; 
    height: 3px; 
    color: #FFD022; 
    background-color: #FFD022; 
    border: none; 
    margin-top: 0px; 
} 

div.divBack { 
    width: 100%; 
    text-align: center; 
} 

div.divBack a { 
    color: #818183; 
    font-size: 0.9rem; 
    font-family: Arial; 
    text-decoration: none; 
} 

div.divBack a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.divRMBtn { 
    color: #fff; 
    background-color: #F89329; 
    text-align: center; 
    font-size: 0.9rem; 
    width: 6rem; 
    padding: 3px 0px; 
    font-family: Arial; 
} 

div.divRMBtn a { 
    color: #fff; 
    text-decoration: none; 
} 

div.divRMBtn a:hover { 
    color: #fff; 
    text-decoration: none; 
} 

div.divSecFt { 
    font-size: 0.8rem; 
    font-style: italic; 
    font-family: Arial; 
    padding: 10px 0px; 
} 

div.divSecFt a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

div.divSecFt a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.container1 { 
    display:table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    /*padding: 0px 0px 0px 30px;*/ 
    position: relative; 
    left: 30px; 
} 

div.divForm { 
    font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 1rem; 
    text-align: left; width:50%; 
    height: 26rem; 
    min-width: 320px; 
    margin: 0 auto; 
    color:#4B4B4B; 
    border: none; 
} 

span.hdr { 
    color: #4D4F44; 
    text-wrap: none; 
} 

span.hdr2 { 
    color: #F59D51; 
    text-transform: uppercase; 
    font-size: 1.1rem; 
    font-weight: bold; 
} 

td.td-ico { 
    width: 73px; 
    max-width: 73px; 
    min-width: 73px; 
    text-align: center; 
    vertical-align: top; 
    padding-right: 5px; 
} 

.ulNltr{ 
    color: #4D4F44; 
    font-family: Arial; 
    font-size: 0.9rem; 
    line-height: 1rem; 
    margin-left: 0px; 
    padding-left: 15px; 
} 

.ulNltr li { 
    padding-bottom: 10px; 
    list-style-image:url(../images/icons/bullet.png) 
} 

.ulNltr li.q1 { 
    list-style-image:url(../images/icons/question_icon.jpg) 
} 

.ulNltr li.c1 { 
    list-style-image:url(../images/icons/contact_icon.jpg) 
} 

.ulNltr a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

.ulNltr a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 

@media only screen and (min-width: 481px) { 

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 90.675%; /*width: 480px;*/ 
    padding-left: 0.75%; 
    padding-right: 0.75%; 
    margin: auto; 
    clear: none; 
    float: none; 
    background-color: #fff; 
} 

.zeroMargin_tablet { 
    margin-left: 0; 
} 

.hide_tablet { 
    display: none; 
} 

#divEPMLogo { 
    background-color:#fff; 
} 

#divHeader { 
    font-family: Arial; 
    background-color: #F89329; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #fff; 
    line-height: 1rem; 
    border: none; 
} 

#divHeader td.tdBanner { 
    background-image: url(../images/Mining_site_v2_Banner768.png); 
    background-position: bottom; 
    background-repeat: no-repeat; 
    background-size: contain; 
    height: 181px; 
    max-width: 480px; 
    margin: 0px; 
} 

#divSubheader { 
    font-family: Arial; 
    background-color: #fff; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #4D4F44; 
    line-height: 1.3rem; 
    border: none; 
} 

div.divCnt { 
    width: 100%; 
    border: none; 
} 

#content header { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #4D4F44; 
    font-family: Arial; 
} 

#content article { 
    font-size: 1rem; 
    color: #818183; 
    font-family: Arial; 
} 

#content hr { 
    width: 100%; 
    height: 3px; 
    color: #FFD022; 
    background-color: #FFD022; 
    border: none; 
    margin-top: 0px; 
} 

div.divBack { 
    width: 100%; 
    text-align: center; 
} 

div.divBack a { 
    color: #818183; 
    font-size: 0.9rem; 
    font-family: Arial; 
    text-decoration: none; 
} 

div.divBack a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.divRMBtn { 
    color: #fff; 
    background-color: #F89329; 
    text-align: center; 
    font-size: 0.9rem; 
    width: 6rem; 
    padding: 3px 0px; 
    font-family: Arial; 
} 

div.divRMBtn a { 
    color: #fff; 
    text-decoration: none; 
} 

div.divRMBtn a:hover { 
    color: #fff; 
    text-decoration: none; 
} 

div.divSecFt { 
    font-size: 0.8rem; 
    font-style: italic; 
    font-family: Arial; 
    padding: 10px 0px; 
} 

div.divSecFt a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

div.divSecFt a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.container1 { 
    display:table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    /*padding: 0px 0px 0px 30px;*/ 
    position: relative; 
    left: 30px; 
} 

div.divForm { 
    font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 1rem; 
    text-align: left; width:50%; 
    height: 26rem; 
    min-width: 320px; 
    margin: 0 auto; 
    color:#4B4B4B; 
    border: none; 
} 

span.hdr { 
    color: #4D4F44; 
    text-wrap: none; 
} 

span.hdr2 { 
    color: #F59D51; 
    text-transform: uppercase; 
    font-size: 1.1rem; 
    font-weight: bold; 
} 

td.td-ico { 
    width: 73px; 
    max-width: 73px; 
    min-width: 73px; 
    text-align: center; 
    vertical-align: top; 
    padding-right: 5px; 
} 

.ulNltr{ 
    color: #4D4F44; 
    font-family: Arial; 
    font-size: 0.8rem; 
    line-height: 1rem; 
} 

.ulNltr li { 
    padding-bottom: 10px; 
    list-style-image:url(../images/icons/bullet.png) 
} 

.ulNltr a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

.ulNltr a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 
} 

/* Desktop Layout: 769px to a max of 1079px. Inherits styles from: Mobile Layout and Tablet Layout. */ 

@media only screen and (min-width: 769px) { 

.gridContainer { 
    width: 88.5%; /*width: 768px;*/ 
    max-width: 768px; 
    padding-left: 0.75%; 
    padding-right: 0.75%; 
    margin: auto; 
    clear: none; 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #fff; 
} 

.zeroMargin_desktop { 
    margin-left: 0; 
} 

.hide_desktop { 
    display: none; 
} 

#divEPMLogo { 
    background-color:#fff; 
} 

#divHeader { 
    font-family: Arial; 
    background-color: #F89329; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #fff; 
    line-height: 1rem; 
    border: none; 
} 

#divHeader td.tdBanner { 
    background-image: url(../images/Mining_site_v2_Banner768.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    height: 181px; 
    max-width: 768px; 
    margin: 0px; 
} 

#divSubheader { 
    font-family: Arial; 
    background-color: #fff; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #4D4F44; 
    line-height: 1.3rem; 
    border: none; 
} 

div.divCnt { 
    width: 33%; 
    float: left; 
    border: none; 
} 

#content header { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #4D4F44; 
    font-family: Arial; 
} 

#content article { 
    font-size: 1rem; 
    color: #818183; 
    font-family: Arial; 
} 

#content hr { 
    width: 100%; 
    height: 3px; 
    color: #FFD022; 
    background-color: #FFD022; 
    border: none; 
    margin-top: 0px; 
} 

div.cntRw { 
    display: table-cell; 
} 

div.divBack { 
    width: 100%; 
    text-align: center; 
} 

div.divBack a { 
    color: #818183; 
    font-size: 0.9rem; 
    font-family: Arial; 
    text-decoration: none; 
} 

div.divBack a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.divRMBtn { 
    color: #fff; 
    background-color: #F89329; 
    text-align: center; 
    font-size: 0.9rem; 
    width: 6rem; 
    padding: 3px 0px; 
    font-family: Arial; 
} 

div.divRMBtn a { 
    color: #fff; 
    text-decoration: none; 
} 

div.divRMBtn a:hover { 
    color: #fff; 
    text-decoration: none; 
} 

div.divSecFt { 
    font-size: 0.8rem; 
    font-style: italic; 
    font-family: Arial; 
    padding: 10px 0px; 
} 

div.divSecFt a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

div.divSecFt a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.container1 { 
    display:table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    /*padding: 0px 0px 0px 30px;*/ 
    position: relative; 
    left: 30px; 
} 

div.divForm { 
    font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 1rem; 
    text-align: left; width:50%; 
    height: 26rem; 
    min-width: 320px; 
    margin: 0 auto; 
    color:#4B4B4B; 
    border: none; 
} 

span.hdr { 
    color: #4D4F44; 
    text-wrap: none; 
} 

span.hdr2 { 
    color: #F59D51; 
    text-transform: uppercase; 
    font-size: 1.1rem; 
    font-weight: bold; 
} 

td.td-ico { 
    width: 73px; 
    max-width: 73px; 
    min-width: 73px; 
    text-align: center; 
    vertical-align: top; 
    padding-right: 5px; 
} 

.ulNltr{ 
    color: #4D4F44; 
    font-family: Arial; 
    font-size: 0.8rem; 
    line-height: 1rem; 
} 

.ulNltr li { 
    padding-bottom: 10px; 
    list-style-image:url(../images/icons/bullet.png) 
} 

.ulNltr a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

.ulNltr a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 
} 

/* Desktop Layout: 1080p and beyond. Inherits styles from: Mobile Layout and Tablet Layout. */ 

@media only screen and (min-width: 1079px) { 

.gridContainer { 
    width: 88.5%; /*width: 1192px; */ 
    max-width: 1192px; 
    padding-left: 0.75%; 
    padding-right: 0.75%; 
    margin: auto; 
    clear: none; 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #fff; 
} 

.zeroMargin_desktop { 
    margin-left: 0; 
} 

.hide_desktop { 
    display: none; 
} 

#divEPMLogo { 
    background-color:#fff; 
} 

#divHeader { 
    font-family: Arial; 
    background-color: #F89329; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #fff; 
    line-height: 1rem; 
    border: none; 
    clear: right; 
} 

#divHeader td.tdBanner { 
    background-image: url(../images/Mining_site_1192x181-12.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    height: 181px; 
    max-width: 1191px; 
    margin: 0px; 
} 

#divSubheader { 
    font-family: Arial; 
    background-color: #fff; 
    text-transform: uppercase; 
    font-size: 1rem; 
    color: #4D4F44; 
    line-height: 1.3rem; 
    border: none; 
} 

div.divCnt { 
    width: 33%; 
    float: left; 
    border: none; 
} 

#content header { 
    font-size: 1.1rem; 
    font-weight: bold; 
    color: #4D4F44; 
    font-family: Arial; 
} 

#content article { 
    font-size: 1rem; 
    color: #818183; 
    font-family: Arial; 
} 

#content hr { 
    width: 100%; 
    height: 3px; 
    color: #FFD022; 
    background-color: #FFD022; 
    border: none; 
    margin-top: 0px; 
} 

div.cntRw { 
    display: table-cell; 
} 

div.divBack { 
    width: 100%; 
    text-align: center; 
    margin: 0px; 
} 

div.divBack a { 
    color: #818183; 
    font-size: 0.9rem; 
    font-family: Arial; 
    text-decoration: none; 
} 

div.divBack a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.divRM { 
    color: #818183; 
    font-size: 0.9rem; 
    font-family: Arial; 
} 

div.divRMBtn { 
    color: #fff; 
    background-color: #F89329; 
    text-align: center; 
    font-size: 0.9rem; 
    width: 6rem; 
    padding: 3px 0px; 
    font-family: Arial; 
} 

div.divRMBtn a { 
    color: #fff; 
    text-decoration: none; 
} 

div.divRMBtn a:hover { 
    color: #fff; 
    text-decoration: none; 
} 

div.divSecFt { 
    font-size: 0.8rem; 
    font-style: italic; 
    font-family: Arial; 
    padding: 10px 0px; 
} 

div.divSecFt a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

div.divSecFt a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 

div.container1 { 
    display:table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    /*padding: 0px 0px 0px 30px;*/ 
    position: relative; 
    left: 30px; 
} 

div.divForm { 
    font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 1rem; 
    text-align: left; width:50%; 
    height: 26rem; 
    min-width: 320px; 
    margin: 0 auto; 
    color:#4B4B4B; 
    border: none; 
} 

span.hdr { 
    color: #4D4F44; 
    text-wrap: none; 
} 

span.hdr2 { 
    color: #F59D51; 
    text-transform: uppercase; 
    font-size: 1.1rem; 
    font-weight: bold; 
} 

td.td-ico { 
    width: 73px; 
    max-width: 73px; 
    min-width: 73px; 
    text-align: center; 
    vertical-align: top; 
    padding-right: 5px; 
} 

.ulNltr{ 
    color: #4D4F44; 
    font-family: Arial; 
    font-size: 0.8rem; 
    line-height: 1rem; 
} 

.ulNltr li { 
    padding-bottom: 10px; 
    list-style-image:url(../images/icons/bullet.png) 
} 

.ulNltr a { 
    color: #4D4F44; 
    text-decoration: none; 
} 

.ulNltr a:hover { 
    color: #F89329; 
    text-decoration: none; 
} 
}

來源

2015-02-09 Poch

+0

儘量有效你的HTML文件第一HTTP：// validator.w3.org/查看是否有任何額外/未關閉的標籤... – Stickers 2015-02-09 01:53:06

+0

嘗試添加： 明確：正確; – 2015-02-09 01:53:24

+0

@sdcr我試過驗證器，沒有未關閉的taqs :( – Poch 2015-02-09 03:44:51

回答

0

它似乎是Firefox是具有與該專區內的表的問題。我改變了HTML部分如下：

\t <!-- Page header and banner --> 
 
    \t <div id="divHeader"> 
 
    \t \t <div style="display: table-cell; vertical-align: middle;"> 
 
    \t \t \t <p>Move Toward <span class="hdr">Zero Unplanned Downtime</span></p> 
 
    \t </div> 
 
    \t </div> 
 
    
 
    \t <div id="divHBanner"> 
 
    \t \t <img src="images/Mining_site_1192x181-12.png" alt=""/> 
 
    \t </div> 
 
    <!-- End Page header and banner -->

它修正原來的錯誤，但它開闢了另一個。相反，我將發佈一個單獨的問題。

來源

2015-02-09 06:45:18 Poch

0

我曾試圖和的jsfiddle在我的網頁測試頁面，一切正常，當我刪除@charset"utf-8";

當我再次設置它，它去再次相撞

來源

2015-02-09 22:37:32

相關問題

 相關問題