Question

主题说明了一切。

只要我的电脑开启，您就可以查看此地址上的HTML：http://78.60.9.233:8080

这里是白色1px线的截图。

http://s16.postimg.org/6gv1ebptg/SSS.jpg

顶部元素设置为5％高度0％顶部位置。中间元素设置为65％高度5％顶部位置。底部元素设置为30％高度和0％底部。

然而，中间元素和底部元素之间存在一个小空间。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="jquery-2.1.3.min.js"></script>
	<script type='application/javascript' src='fastclick.js'></script>

	<script>

		$(function() {
			FastClick.attach(document.body);
		});

		$(function() {
			$('.tabs .navigation a').on('click', function(e)  {
				var currentAttrValue = jQuery(this).attr('href');

		        // Show/Hide Tabs
		        $('.tabs ' + currentAttrValue).show().siblings().hide();

		        // Change/remove current tab to active
		        $(this).parent('td').addClass('active').siblings().removeClass('active');

		        e.preventDefault();
		    });
		});

	</script>

	<style type="text/css">

		* {
			margin: 0;
			padding: 0;
			overflow-x:hidden;
		    -webkit-touch-callout: none;
		    -webkit-user-select: none;
		    -khtml-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
  			-webkit-tap-highlight-color: rgba(0,0,0,0);
  			-webkit-tap-highlight-color: transparent;
  			-webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
			-moz-box-sizing: border-box;    /* Firefox 1 - 28 */
			box-sizing: border-box;
		}

		.tab {
			display:none;
		}

		.tab.active {
			display:block;
		}


		.navigation  {
			position: absolute;
			bottom: 0%;
  			border-spacing: 0px;
  			font-size: 0px;
  			height: 30%;

  			


		}


		.navigation td {
			border: 1px solid black;
			text-align:center;


		}

		td.active {
		background-color: #b0c4de;

		}

		.action-nav1 {
  			border-spacing: 0px;
  			width: 100%;


		}





		.top-icons td {
			position: absolute;
			top: 0;
			left: 0;
			border: 1px solid black;
			width: 100%;
			height: 5%;
			overflow: hidden;


		}

		.tab-content  {
			position: absolute;
			top: 5%;
			width: 100%;
			height: 65%;

		}

	

	</style>
</head> 

<body>





<table class="top-icons">

		<tr>

			<td><img src="photo.png" style="height:100%"><img src="photo.png" style="height:100%"><img src="photo.png" style="height:100%"><img src="photo.png" style="height:100%"><img src="photo.png" style="height:100%"></td>



		</tr>

	</table>

</div>

<div class="tabs">

	<table class="navigation">

		<tr>

			<td class="active"><a href="#tab1"><img src="photo.png" style="width:80%"></a></td>
			<td><a href="#tab2"><img src="photo.png" style="width:80%"></a></td>
			<td><a href="#tab3"><img src="photo.png" style="width:80%"></a></td>
			<td><a href="#tab4"><img src="photo.png" style="width:80%"></a></td>
			<td><a href="#tab5"><img src="photo.png" style="width:80%"></a></td>


		</tr>

	</table>

		<div class="tab-content">

			<div id="tab1" class="tab active">
				<table class="action-nav1">
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
				<tr>
				<td>Labas</td>
				</tr>
			
				</table>
			</div>

			<div id="tab2" class="tab">
				<td>Tab #2 content goes here!</td>
			</div>

			<div id="tab3" class="tab">
				<td><p>Tab #3 content goes here!</p></td>
			</div>

			<div id="tab4" class="tab">
				<td><p>Tab #4 content goes here!</p></td>
			</div>

			<div id="tab5" class="tab">
				<td><p>Tab #5 content goes here!</p></td>
			</div>


		</div>
	</div>

</body>

</html>

怎么了？如何消除1px空白空间？

CSS位置偏离1px - 为什么？

0 个答案: