Chrome和Safari中的可滾動表格行在Firefox和Internet Explorer中失敗

Question

我設法用表CSS創建了一個固定的頁腳/頁眉。 希望使訂單項部分可滾動。 在Chrome和Safari中效果很好，在Firefox和Internet Explorer中失敗。

我覺得Firefox和IE根本不支持我嘗試執行的操作，因為它們以相同的方式失敗。

.order-wrapper {
    display: table;
    height: 100%;
}

如果我在order-wrapper類選擇器中切換任一屬性，則可以模擬Chrome中的行為。

http://jsfiddle.net/0fvkec56/

Answer 1

不是解決方案！ 但這可能會觸發某人對解決方案的見識。

這是在Safari / chrome中運行的自包含HTML / CSS / javascript。 我在firefox / mozilla（IE未知）中也遇到類似的問題。 將窗口拖動到最小尺寸，然后滾動兩個字段。 我想找到針對mozilla和IE的修復程序。 嘗試使用“ -moz”和“ -webkit” CSS關鍵字失敗。

<!DOCTYPE html>
<html lang="en-US"> <!-- Small window. PASS: chrome/safari. FAIL: Firefox. -->
<head>
  <meta charset="utf-8" />
  <meta name="keywords" content="scrolling" />
  <meta name="description" content="asynchronous character-at-a-time chat" />

  <title>scrolling</title>

  <script type="text/javascript">
function hDoc(f) { return f.toString().replace(/.*\/\*([^\*]*).\/.*/, '$1');  }
function fillContent(lbl,txt) { document.getElementById(lbl).innerHTML = txt; }
function loadContent() {
  labelA = hDoc(function() {/* Shakespeare sonnet CXVI: */});
  verseA = hDoc(function() {/* <pre>
Let me not to the marriage of true minds
Admit impediments. Love is not love
Which alters when it alteration finds,
Or bends with the remover to remove:
O, no! it is an ever-fixed mark,
That looks on tempests and is never shaken;
It is the star to every wandering bark,
Whose worth's unknown, although his height be taken.
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;
Love alters not with his brief hours and weeks,
But bears it out even to the edge of doom.
  If this be error and upon me proved,
  I never writ, nor no man ever loved.
</pre> */});
  labelB = hDoc(function() {/* Shakespeare sonnet CX: */});
  verseB = hDoc(function() {/* <pre>
Alas! 'tis true, I have gone here and there,
And made my self a motley to the view,
Gored mine own thoughts, sold cheap what is most dear,
Made old offences of affections new;
Most true it is, that I have looked on truth
Askance and strangely; but, by all above,
These blenches gave my heart another youth,
And worse essays proved thee my best of love.
Now all is done, have what shall have no end:
Mine appetite I never more will grind
On newer proof, to try an older friend,
A god in love, to whom I am confined.
  Then give me welcome, next my heaven the best,
  Even to thy pure and most most loving breast.
</pre> */});

  content = [
    ['labelA', labelA], ['labelB', labelB],
    ['verseA', verseA], ['verseB', verseB]
  ];
  for (i=0; i<content.length; i+=1) fillContent(content[i][0], content[i][1]);
}
  </script>

  <style type="text/css">
html, body { height:94%;  line-height:60%;                                    }
table      { border-collapse:collapse;                                        }
table      {        position:absolute; top:0; bottom:50%; left:0; right:0;    }
table      { height:100%; width:100%;                                         }
div        { height:100%; width:100%;             overflow:auto;              }
td         {              width:100%;     padding:1px; vertical-align:top;    }
th.headerA { height:8px; background-color:#000;            text-align:center; }
th.headerB { height:8px; background-color:#FFF;            text-align:center; }
#labelA    {             background-color:#000;  color:#0C0;  font-size:8px;  }
#labelB    {             background-color:#FFF;  color:#C00;  font-size:8px;  }
#cellA     {             background-color:#000;                               }
#cellB     {             background-color:#FFF;                               }
#verseA    {                                     color:#FFF;  font-size:10px; }
#verseB    {                                     color:#000;  font-size:10px; }
  </style>
</head>

<body onLoad="loadContent()">
  <table>
    <th class="headerA"><b id="labelA"></b></th>
    <tr><td id="cellA"><div id="verseA"></div></td></tr>
    <th class="headerB"><b id="labelB"></b></th>
    <tr><td id="cellB"><div id="verseB"></div></td></tr>
  </table>
</body>
</html>

Chrome和Safari中的可滾動表格行在Firefox和Internet Explorer中失敗

問題描述

1 個解決方案

解決方案1
0 2016-01-06 06:43:19

Chrome和Safari中的可滾動表格行在Firefox和Internet Explorer中失敗

問題描述

1 個解決方案

解決方案1 0 2016-01-06 06:43:19

解決方案1
0 2016-01-06 06:43:19