Question

我有一个可以在IE和Chrome中正确呈现的页面，但在Firefox中没有。我想要在所有三个浏览器中的结果如下所示：

...但在Firefox中，它看起来像这样：

到目前为止我的代码是：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>My title</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin-left:50px;
        margin-right:50px;
      }
      .title{
        float:left;
        font-size:x-large;
      }
      .right-aligned{ 
        float:right;
        font-size:smaller;
        text-align:right;
      }
      table,tr,td,th {
        border:1px solid black;
      }
      tr.clsTable {
        background-color:lightgray;
      }
      td.tableContainer {
        padding:0px;
      }
      table {
        border-collapse: collapse;
      }
      td.spacer {
        border-right:hidden;
      }
      table.clsSubTable {
        border-top:0px hidden;
        border-right:0px hidden;
      }
      td,th {
        padding:3px;
      }
      th {
        background-color:burlywood
      }
      .no-result{
        position:absolute;
        top:50px;
      }
    </style>
  </head>
  <body>
    <div class="title">My title</div>
    <div class="right-aligned">Right<br/>aligned</div>
    <br/>
    <div>
      <table class="clsTable" width="100%">
        <tr>
          <th>Some heading</th>
          <th>Some other heading</th>
        </tr>
        <tr class="clsTable">
          <td>Some data</td>
          <td>Some other data</td>
        </tr>
      </table>
    </div>
  </body>
</html>

我做错了什么，如果没有＆＃34;打破＆＃34;我需要做些什么才能解决Firefox问题？ IE和Chrome中的当前行为（＆＃34;右对齐＆＃34;文本在调整浏览器窗口大小时保持与表右边缘的关系）？

Answer 1

这是滥用花车的副作用。最好的解决方案是使用display:inline-block代替。

（jsBin）

＆＃13;

.wrp {
    font-size: 0; /* Prevent white-space between tags being rendered as text */
}
.title, .right-aligned {
    display: inline-block;
}
.title {
    width: 75%;
    font-size:x-large;
}
.right-aligned { 
    width: 25%;
    font-size: 10pt;
    text-align:right;
}                                                                                         body { font-family: Arial, Helvetica, sans-serif; margin-left:50px; margin-right:50px; } table,tr,td,th { border:1px solid black; } tr.clsTable { background-color:lightgray; } td.tableContainer { padding:0px; } table { border-collapse: collapse; } td.spacer { border-right:hidden; } table.clsSubTable { border-top:0px hidden; border-right:0px hidden; } td,th { padding:3px; } th { background-color:burlywood }

＆＃13;

<div class="wrp">
  <div class="title">My title</div>
  <div class="right-aligned">Right<br/>aligned</div>
</div>                                                                                      <div><table class="clsTable" width="100%"><tr><th>Some heading</th><th>Some other heading</th></tr><tr class="clsTable"><td>Some data</td><td>Some other data</td></tr></table></div>

＆＃13;

Answer 2

某些浏览器不支持某些CSS3内容。 -moz-通常可以解决问题。让我们说firefox不支持CSS中的边距权限。你可以说-moz-margin-right：40px;

如何获得＆＃34;标题＆＃34;文本左右对齐在HTML中的表格上

2 个答案: