在Internet Explorer中，表格浮动标题还在表格中添加额外的垂直滚动条，在桌面底部添加一些小空格。但是将字体大小从17px更改为16px会删除额外的滚动条和空格。有没有办法使用font-size 17px而不添加额外的滚动条，并且在Internet Explorer的桌面底部没有额外的空格？
小提琴：https://jsfiddle.net/bsxx39vo/
我的屏幕尺寸是1366x768和os windows 10.
这个问题也出现在某些缩放级别的firefox中。
我完全不明白为什么会这样。
JS：
/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
$(function(){
$('table').each(function() {
if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
// Clone <thead>
var $w = $(window),
$t = $(this),
$thead = $t.find('thead').clone(),
$col = $t.find('thead, tbody').clone();
// Add class, remove margins, reset width and wrap table
$t
.addClass('sticky-enabled')
.css({
margin: 0,
width: '100%'
}).wrap('<div class="sticky-wrap" />');
if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');
// Create new sticky table head (basic)
$t.after('<table class="sticky-thead" />');
// If <tbody> contains <th>, then we create sticky column and intersect (advanced)
if($t.find('tbody th').length > 0) {
$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}
// Create shorthand for things
var $stickyHead = $(this).siblings('.sticky-thead'),
$stickyCol = $(this).siblings('.sticky-col'),
$stickyInsct = $(this).siblings('.sticky-intersect'),
$stickyWrap = $(this).parent('.sticky-wrap');
$stickyHead.append($thead);
$stickyCol
.append($col)
.find('thead th:gt(0)').remove()
.end()
.find('tbody td').remove();
$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');
// Set widths
var setWidths = function () {
$t
.find('thead th').each(function (i) {
$stickyHead.find('th').eq(i).width($(this).width());
})
.end()
.find('tr').each(function (i) {
$stickyCol.find('tr').eq(i).height($(this).height());
});
// Set width of sticky table head
$stickyHead.width($t.width());
// Set width of sticky table col
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
},
repositionStickyHead = function () {
// Return value of calculated allowance
var allowance = calcAllowance();
// Check if wrapper parent is overflowing along the y-axis
if($t.height() > $stickyWrap.height()) {
// If it is overflowing (advanced layout)
// Position sticky header based on wrapper scrollTop()
if($stickyWrap.scrollTop() > 0) {
// When top of wrapping parent is out of view
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $stickyWrap.scrollTop()
});
} else {
// When top of wrapping parent is in view
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
} else {
// If it is not overflowing (basic layout)
// Position sticky header based on viewport scrollTop
if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
// When top of viewport is in the table itself
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
}
},
repositionStickyCol = function () {
if($stickyWrap.scrollLeft() > 0) {
// When left of wrapping parent is out of view
$stickyCol.add($stickyInsct).css({
opacity: 1,
left: $stickyWrap.scrollLeft()
});
} else {
// When left of wrapping parent is in view
$stickyCol
.css({ opacity: 0 })
.add($stickyInsct).css({ left: 0 });
}
},
calcAllowance = function () {
var a = 0;
// Calculate allowance
$t.find('tbody tr:lt(3)').each(function () {
a += $(this).height();
});
// Set fail safe limit (last three row might be too tall)
// Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
if(a > $w.height()*0.25) {
a = $w.height()*0.25;
}
// Add the height of sticky header
a += $stickyHead.height();
return a;
};
setWidths();
$t.parent('.sticky-wrap').scroll($.throttle(15, function() {
repositionStickyHead();
repositionStickyCol();
}));
$w
.load(setWidths)
.resize($.debounce(250, function () {
setWidths();
repositionStickyHead();
repositionStickyCol();
}))
.scroll($.throttle(15, repositionStickyHead));
}
});
});
的CSS：
body{ margin:0; font-size:17px; color:#333; font-family:Arial, sans-serif; line-height:1.8em; background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:#333; }
table{ border-spacing:0; white-space:nowrap; cursor:default; line-height:1.4em; }
table thead th{ border:1px solid #ccc; text-align:center; vertical-align:middle; background:#339966; color:#eee; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table thead th a{ color:#fff; }
table thead th a:hover{ color:#54b9f8; }
table tbody th{ border:1px solid #fff; text-align:center; vertical-align:middle; background:#ddd; color:#222; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table tbody th a{ color:#222; }
table tbody th a:hover{ color:#076cab; }
table td{ padding:8px; border:1px solid #ccc; }
table > thead > tr > th{ vertical-align:top; }
.sticky-wrap{ position:relative; overflow-x:auto; margin:80px 1% 90px; }
.sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect{ position:absolute; top:0; }
.sticky-wrap .sticky-intersect{ opacity:1; z-index:10; display:none; }
.sticky-wrap td, .sticky-wrap th{ box-sizing:border-box; }
.sticky-wrap .sticky-thead{ transition:all 0.35s 0.1s ease-in-out; -o-transition:all 0.35s 0.1s ease-in-out; -moz-transition:all 0.35s 0.1s ease-in-out; -webkit-transition:all 0.35s 0.1s ease-in-out; box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); -moz-box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); -webkit-box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); }
.sticky-wrap .sticky-col { transition:all 0.125s 0.1s ease-in-out; -o-transition:all 0.125s 0.1s ease-in-out; -moz-transition:all 0.125s 0.1s ease-in-out; -webkit-transition:all 0.125s 0.1s ease-in-out; box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); -moz-box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); -webkit-box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); }
HTML：
<table>
<thead>
<tr>
<th scope="row">Platforms</th>
<th scope="col">domain options</th>
<th scope="col">hosting available</th>
<th scope="col"><em>bandwidth</em></th>
<th scope="col">customer support </th>
<th colspan="2" rowspan="1" scope="col">ease of use community <br />
ratings</th>
<th scope="col"><strong><em> user ratings</em></strong></th>
<th scope="col">pros</th>
<th scope="col">cons</th>
<th scope="col">cost</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="https://www.blogger.com/">Blogger</a></th>
<td>yes</td>
<td>yes</td>
<td>12gb</td>
<td>yes</td>
<td>9</td>
<td>3</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row"><em><a href="https://wordpress.com/">Wordpress</a></em></th>
<td>yes</td>
<td>no</td>
<td><em>12gb</em></td>
<td>yes</td>
<td>8</td>
<td>6</td>
<td>8</td>
<td><em> very good support and users support</em></td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row"><a href="https://wordpress.com/">Tumblr</a></th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>Free of cost</td>
</tr>
<tr>
<th rowspan="4" scope="row"><a href="https://wordpress.com/">Typepad</a></th>
<td>yes</td>
<td rowspan="3">no</td>
<td rowspan="3"><a href="http://www.wix.com/">12gb</a></td>
<td rowspan="3">-</td>
<td rowspan="3">8</td>
<td rowspan="3">6</td>
<td rowspan="4"><a href="http://comparisonsheet.com/">7</a></td>
<td rowspan="4">user friendly, and <a href="http://www.wix.com/">very</a> easy</td>
<td rowspan="4"><a href="http://www.typepad.com/pricing">very few plugins</a></td>
<td rowspan="4"> $500.00 per year</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>-</td>
<td>available</td>
<td>limited upload</td>
<td>yes</td>
<td colspan="2"> </td>
</tr>
<tr>
<th scope="row"><a href="https://www.blogger.com/">CMS1</a></th>
<td><a href="http://www.typepad.com/pricing">yes</a></td>
<td><strong>yes</strong></td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>highly customizable and flexible</td>
<td>lack of enough themes</td>
<td><a href="http://www.typepad.com/pricing">$1000.00 per year</a></td>
</tr>
<tr>
<th scope="row"><a href="https://www.blogger.com/">CMS2</a></th>
<td>yes</td>
<td>yes</td>
<td>e<a href="http://www.typepad.com/pricing">23gb</a></td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row"><a href="http://www.typepad.com/">Movabletype</a></th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td><strong>easy to maintain</strong></td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">squarespace</th>
<td>no</td>
<td>yes</td>
<td>unlimited download</td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td><em>user friendly, and very easy</em></td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wp.org</th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row"><a href="https://www.blogger.com/">blogger</a></th>
<td>yes</td>
<td>yes</td>
<td>12gb</td>
<td>yes</td>
<td colspan="2">9</td>
<td>9</td>
<td><a href="http://www.wix.com/">user friendly, and very easy</a></td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wordpress</th>
<td>yes</td>
<td>no</td>
<td><a href="http://www.wix.com/">12gb</a></td>
<td>yes</td>
<td colspan="2">8</td>
<td>8</td>
<td> very good support and users support</td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row">tumblr</th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row"><a href="http://www.typepad.com/">typepad</a></th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>-</td>
<td colspan="2">8</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td><a href="http://www.typepad.com/pricing"> $500.00 per year</a></td>
</tr>
<tr>
<th scope="row">cms1</th>
<td>yes</td>
<td>yes</td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td><a href="http://www.wix.com/">highly customizable and flexible</a></td>
<td>lack of enough themes</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">cms2</th>
<td>yes</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">movabletype</th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td>easy to maintain</td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row"><a href="http://www.typepad.com/">squarespace</a></th>
<td>no</td>
<td>yes</td>
<td><a href="http://www.typepad.com/pricing">unlimited download</a></td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row"><a href="http://www.typepad.com/">wp.org</a></th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row"><a href="http://www.typepad.com/">blogger</a></th>
<td>yes</td>
<td><a href="http://www.typepad.com/pricing">yes</a></td>
<td><em>12gb</em></td>
<td>yes</td>
<td colspan="2">9</td>
<td>9</td>
<td><em>user friendly, and very easy</em></td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wordpress</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>yes</td>
<td colspan="2">8</td>
<td>8</td>
<td><a href="http://www.typepad.com/pricing"> very good support and users support</a></td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row">tumblr</th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td><a href="http://www.typepad.com/pricing">Free of cost</a></td>
</tr>
<tr>
<th scope="row">typepad</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>-</td>
<td colspan="2">8</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">cms1</th>
<td>yes</td>
<td>yes</td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td><a href="http://www.typepad.com/pricing">highly customizable and flexible</a></td>
<td>lack of enough themes</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">cms2</th>
<td>yes</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">movabletype</th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td>easy to maintain</td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">squarespace</th>
<td>no</td>
<td>yes</td>
<td>unlimited download</td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wp.org</th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
</tbody>
</table>