1

垂直和水平对齐和高度百分比在 Firefox 中无法正常工作虽然它在 IE 和 Chrome 上工作正常，但我在 html 和正文中将高度和宽度设置为 100%

html,body { heigh:100% ; width:100% }

我尝试了所有可能的解决方案text-align: -moz-center; display:block; ，例如这是我的代码

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 93%;">
    <tr style="height: 42px; width: 100%">
        <td style="width: 80px; background-image: url(Images/logo.png); background-repeat: no-repeat;
            height: 42px;">
        </td>
        <td style="height: 42px">
        </td>
    </tr>
    <tr align="center" valign="middle">
        <td style="height: 196px;" align="center" valign="middle">
            <table class="partTable" style="padding-bottom: 20px">
           <tr>
                    <td align="center" style="font-size: xx-large; font-family: Arial Black; color: #C11B17">
                        <span>
                            <%=System.Configuration.ConfigurationManager.AppSettings["AppName"]%>
                        </span>
                    </td>
                </tr>
            </table>
            <table border="0" style="text-align: -moz-center; vertical-align: middle; display: block;
                margin: 0 auto;">
                <tr>
                    <td valign="middle" class="partHolder" style="width: 314px; height: 201px;">
                 --Content
                    </td>
                </tr>
            </table>
    </tr>

注意：表格不占页面的 93%。它就像一个汽车。当我把它放在<!DOCTYPE html>html 标签之前时就发生了

4

1 回答 1

0
  1. 使用样式margin:0 auto使您的桌子居中。
  2. 确保 table 的所有容器都是 height: 100%; 例如：

而且您的代码有一些不便之处：

<tr style="height: 42px; width: 100%">
           ^^^^^^^^^^^^ this is ok
   </tr>
   <tr align="center" valign="middle">
       <td style="height: 196px;">
                  ^^^^^^^^^^^^^^ 
                 This is wrong. you should 
                 remove it to make table auto-risze. 
                 And you should use `height` only to <tr>

它就像一个汽车。当我把它放在 html 标签之前时就发生了

height:93%如果您使用, 然后使用height:42px,height:196px表示行， Firefox 只会发疯。<!DOCTYPE html>我相信当您使用标签时，Firefox 正在使用更严格的方法来呈现 HTML+CSS

另外..不要使用text-alignfor table, tr- 因为它们不包含任何文本。仅用于td

于 2012-08-25T20:33:16.750 回答