响应式垂直页面导航的边框问题
Border Problems with Responsive Vertical Page Navigation
我需要你的帮助来解决一系列较小的问题，也许可以一站式解决，谁知道呢。我似乎无法再靠自己解决这个问题，需要一双全新的眼睛来浏览我的 HTML 和 CSS 编码。我还附上了我遇到的每个问题的屏幕截图：
问题#1：
选择活动选项卡时，我的选项卡中似乎有一个破损的底部边框。
问题#2：
当活动选项卡切换到另一个选项卡时，顶部或底部边框会显得稍粗。
问题#3：
在最后一个选项卡上，当被选为活动选项卡时，底部边框完全消失了吗？
问题#4：
当切换任何活动选项卡时，如何摆脱右侧的 1px 边框？
无论是否选中，每个边框都应仅保持 1 像素。
这是有问题的 HTML 和 CSS 代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style type="text/css">
body {
background: #fff;
font-family: Segoe UI;
font-size: 9pt;
padding-top: 50px;
}
#vtab {
margin: auto;
width: 800px;
height: 100%;
}
#vtab > ul > li {
width: 110px;
height: 110px;
background-color: rgb(245,245,245);
list-style-type: none;
display: block;
text-align: center;
margin: auto;
padding-bottom: 10px;
position: relative;
border-top: 1px solid rgb(214,214,214);
border-left: 1px solid rgb(214,214,214);
border-bottom: 1px solid rgb(214,214,214);
}
#vtab > ul > li.home {
/* background: url('home.png') no-repeat center center; */
}
#vtab > ul > li.login {
/* background: url('login.png') no-repeat center center; */
}
#vtab > ul > li.support {
/* background: url('support.png') no-repeat center center; */
}
#vtab > ul > li.selected {
margin-right: 5px;
z-index: 10;
position: relative;
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
#vtab > ul {
float: left;
width: 110px;
text-align: left;
display: block;
margin: auto 0;
padding: 0;
position: relative;
top: 20px;
}
#vtab > div {
background-color: #fafafa;
margin-left: 110px;
border: 1px solid #ddd;
min-height: 500px;
padding: 12px;
position: relative;
z-index: 9;
}
#vtab > div > h4 {
color: #800;
border-bottom: 1px dotted #800;
padding-top: 5px;
margin-top: 0;
}
</style>
<script type="text/javascript">
$(function() {
var $items = $('#vtab>ul>li');
$items.mouseover(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(1).mouseover();
});
</script>
</head>
<body>
<div id="vtab">
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div>
<h4>Tab1 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br />
<br />
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
<div>
<h4>Tab2 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br/><br/>
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
<div>
<h4>Tab3 Content</h4>
Maecenas in varius nulla. Morbi leo elit, volutpat ac faucibus in; aliquam eget
massa. Nullam a neque ac turpis luctus venenatis et placerat risus. Quisque pretium
scelerisque sapien, et accumsan nunc venenatis non. Donec ullamcorper, leo gravida
hendrerit interdum, tellus nisi vestibulum justo; quis dignissim enim risus quis
ipsum.<br />
<br />
Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam
scelerisque purus nulla ac enim. Cras urna urna, vestibulum ut aliquam sed, laoreet
et justo! Vestibulum eleifend porta mollis. Donec molestie, turpis sed commodo consequat,
erat purus sollicitudin arcu, non vestibulum risus lacus ac ipsum. Curabitur vitae
pellentesque purus.
</div>
<div>
<h4>Tab4 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br />
<br />
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
</div>
</body>
</html>
我没有运行进入你fiddle中的断边或侧边问题。至于粗 border/invisible 边框，这里是您可以进行的更改：
fiddle: https://jsfiddle.net/qy9oLzu8/1/
#vtab > ul > li.selected {
margin-right: 5px;
z-index: 10;
position: relative;
background-color: #FFF;
border-bottom: 0px solid #FFF;
border-top: 0px solid #FFF;
}
#vtab > ul > li:first-child.selected {
border-top: 1px solid rgb(214,214,214);
}
#vtab > ul > li:last-child.selected {
border-bottom: 1px solid rgb(214,214,214);
}
只需在第一个 child 上恢复顶部边框，在最后一个 child 上恢复底部边框。我希望这会有所帮助:)
我需要你的帮助来解决一系列较小的问题，也许可以一站式解决，谁知道呢。我似乎无法再靠自己解决这个问题，需要一双全新的眼睛来浏览我的 HTML 和 CSS 编码。我还附上了我遇到的每个问题的屏幕截图：
问题#1：
选择活动选项卡时，我的选项卡中似乎有一个破损的底部边框。
问题#2：
当活动选项卡切换到另一个选项卡时，顶部或底部边框会显得稍粗。
问题#3：
在最后一个选项卡上，当被选为活动选项卡时，底部边框完全消失了吗？
问题#4：
当切换任何活动选项卡时，如何摆脱右侧的 1px 边框？
无论是否选中，每个边框都应仅保持 1 像素。
这是有问题的 HTML 和 CSS 代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style type="text/css">
body {
background: #fff;
font-family: Segoe UI;
font-size: 9pt;
padding-top: 50px;
}
#vtab {
margin: auto;
width: 800px;
height: 100%;
}
#vtab > ul > li {
width: 110px;
height: 110px;
background-color: rgb(245,245,245);
list-style-type: none;
display: block;
text-align: center;
margin: auto;
padding-bottom: 10px;
position: relative;
border-top: 1px solid rgb(214,214,214);
border-left: 1px solid rgb(214,214,214);
border-bottom: 1px solid rgb(214,214,214);
}
#vtab > ul > li.home {
/* background: url('home.png') no-repeat center center; */
}
#vtab > ul > li.login {
/* background: url('login.png') no-repeat center center; */
}
#vtab > ul > li.support {
/* background: url('support.png') no-repeat center center; */
}
#vtab > ul > li.selected {
margin-right: 5px;
z-index: 10;
position: relative;
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
#vtab > ul {
float: left;
width: 110px;
text-align: left;
display: block;
margin: auto 0;
padding: 0;
position: relative;
top: 20px;
}
#vtab > div {
background-color: #fafafa;
margin-left: 110px;
border: 1px solid #ddd;
min-height: 500px;
padding: 12px;
position: relative;
z-index: 9;
}
#vtab > div > h4 {
color: #800;
border-bottom: 1px dotted #800;
padding-top: 5px;
margin-top: 0;
}
</style>
<script type="text/javascript">
$(function() {
var $items = $('#vtab>ul>li');
$items.mouseover(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(1).mouseover();
});
</script>
</head>
<body>
<div id="vtab">
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div>
<h4>Tab1 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br />
<br />
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
<div>
<h4>Tab2 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br/><br/>
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
<div>
<h4>Tab3 Content</h4>
Maecenas in varius nulla. Morbi leo elit, volutpat ac faucibus in; aliquam eget
massa. Nullam a neque ac turpis luctus venenatis et placerat risus. Quisque pretium
scelerisque sapien, et accumsan nunc venenatis non. Donec ullamcorper, leo gravida
hendrerit interdum, tellus nisi vestibulum justo; quis dignissim enim risus quis
ipsum.<br />
<br />
Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam
scelerisque purus nulla ac enim. Cras urna urna, vestibulum ut aliquam sed, laoreet
et justo! Vestibulum eleifend porta mollis. Donec molestie, turpis sed commodo consequat,
erat purus sollicitudin arcu, non vestibulum risus lacus ac ipsum. Curabitur vitae
pellentesque purus.
</div>
<div>
<h4>Tab4 Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt
metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam
a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque!
Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat
facilisis. Curabitur dignissim dignissim lacinia!
<br />
<br />
Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper
dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim
aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue
lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae
pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam
eleifend sed.
</div>
</div>
</body>
</html>
我没有运行进入你fiddle中的断边或侧边问题。至于粗 border/invisible 边框，这里是您可以进行的更改：
fiddle: https://jsfiddle.net/qy9oLzu8/1/
#vtab > ul > li.selected {
margin-right: 5px;
z-index: 10;
position: relative;
background-color: #FFF;
border-bottom: 0px solid #FFF;
border-top: 0px solid #FFF;
}
#vtab > ul > li:first-child.selected {
border-top: 1px solid rgb(214,214,214);
}
#vtab > ul > li:last-child.selected {
border-bottom: 1px solid rgb(214,214,214);
}
只需在第一个 child 上恢复顶部边框，在最后一个 child 上恢复底部边框。我希望这会有所帮助:)