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

我設法創建了具有表格CSS的固定頁腳/標題。使訂單項部分可滾動的希望。適用於Chrome和Safari，在Firefox和Internet Explorer中失敗。Chrome和Safari中的可滾動表格行，在Firefox和Internet Explorer中失敗

我覺得我想要做的只是在Firefox和IE中不支持，因爲它們以相同的方式失敗。

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

如果我切換順序包裝類選擇器中的任何一個屬性，我可以模擬Chrome中的行爲。

http://jsfiddle.net/0fvkec56/

來源

2015-11-18 sime

不是解決方案！但這可能會引發某人對解決方案的洞察力。

這是一個獨立的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>

來源

2016-01-06 06:43:19 jlettvin

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

回答

相關問題