Question

垂直和水平对齐和高度百分比在firefox中无法正常工作虽然它在IE和Chrome上运行良好我在html和body中将hight和width设置为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标签

之前时就会发生这种情况

Answer 1

使用样式margin:0 auto将表格置于中心位置。
确保桌子的所有容器都是高度：100％; 例如：
- this will work
- this won't work - 而here是修复

你的代码中有一些不便之处：

<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>标记

另外..不要将text-align用于table，tr - 因为它们不包含任何文字。仅将其用于td

对齐不适用于Firefox

1 个答案: