我已经设法用表格 CSS 创建了一个固定的页脚/页眉。希望使 order-items 部分可滚动。在 Chrome 和 Safari 中运行良好，在 Firefox 和 Internet Explorer 中失败。
我觉得我正在尝试做的事情在 Firefox 和 IE 中根本不受支持，因为它们以同样的方式失败。
.order-wrapper {
display: table;
height: 100%;
}
如果我在 order-wrapper 类选择器中切换任一属性，我可以模拟 Chrome 中的行为。
【问题讨论】：
标签： html css firefox css-tables tablerow
不是解决方案！但这可能会引发某人对解决方案的洞察力。
这是一个独立的 HTML/CSS/javascript，可在 safari/chrome 中运行。 我对 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>
【讨论】：