文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >CSS选项卡在Mozilla Firefox中显示不正确

问CSS选项卡在Mozilla Firefox中显示不正确
EN

Stack Overflow用户
提问于 2017-06-28 18:13:55
回答 4查看 218关注 0票数 0

我已经使用css来显示右侧角度的选项卡(向导类型)。它在Chrome和IE 11上工作得很好，但在Mozilla Firefox中，它在底部显示了额外的一行(见屏幕截图)：

​

​

JSFiddle：https://jsfiddle.net/LwdejrLm/

​

代码语言：javascript
复制
.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs.three li {
  width: 31.4%;
}

.tabs.four li {
  width: 23%;
}

.tabs>li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  float: left;
}

.tabs>li+li {
  margin-left: 0;
}

.tabs>li:first-child {
  border-left: 0;
}

.tabs>li:last-child {
  border-right: 0;
}

.tabs>li span {
  border-radius: 0;
  background-color: #e04411;
  padding: 10px;
  display: inline-block;
  padding: 11px 20px;
  color: #fff;
  width: 100%;
}

.tabs>li .tbno {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}

.tabs>li:last-child .tbno {
  right: -30px;
}

.tabs>li .nav-arrow {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 10px 20px 20px;
  border-color: #fff #fff #fff #e04411;
  z-index: 150;
}

.tabs>li .nav-wedge {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #e04411 #eeeeee #e04411 transparent;
  z-index: 150;
}

.tabs>li.active .nav-arrow {
  border-color: #fff #fff #fff #444;
}

.tabs>li.active .nav-wedge {
  border-color: #444 #444 #444 transparent;
}

.tabs>li.active span {
  background-color: #444;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .tabs.three li {
    width: 22%;
  }
  .tabs.four li {
    width: 22%;
  }
}

@media (max-width: 992px) {
  .tabs.four li {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .tabs.four li {
    width: 18.5%;
  }
  .tabs>li span {
    padding: 11px 6px;
  }
  .tabs>li .tbno {
    display: none;
  }
}

@media (max-width: 400px) {
  .tabs.four li {
    width: 17%;
  }
}
代码语言：javascript
复制
<ul class="tabs four">
  <li><span>Booking</span>
    <div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
    <div class="tbno">4</div>
  </li>
</ul>

​

css
html
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-06-28 18:33:51

.tabs>li span是inline-block元素，它从父元素继承了一些属性，比如line-height，所以你需要重置它。

代码语言：javascript
复制
.tabs>li span{
  line-height: 1;
  height: 40px;
  box-sizing: border-box;
}

​

代码语言：javascript
复制
.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs.three li {
  width: 31.4%;
}

.tabs.four li {
  width: 23%;
}

.tabs>li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  float: left;
}

.tabs>li+li {
  margin-left: 0;
}

.tabs>li:first-child {
  border-left: 0;
}

.tabs>li:last-child {
  border-right: 0;
}

.tabs>li span {
  border-radius: 0;
  background-color: #e04411;
  padding: 10px;
  display: inline-block;
  padding: 11px 20px;
  color: #fff;
  width: 100%;
  line-height: 1;
  height: 40px;
  box-sizing: border-box;
}

.tabs>li .tbno {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}

.tabs>li:last-child .tbno {
  right: -30px;
}

.tabs>li .nav-arrow {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 10px 20px 20px;
  border-color: #fff #fff #fff #e04411;
  z-index: 150;
}

.tabs>li .nav-wedge {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #e04411 #eeeeee #e04411 transparent;
  z-index: 150;
}

.tabs>li.active .nav-arrow {
  border-color: #fff #fff #fff #444;
}

.tabs>li.active .nav-wedge {
  border-color: #444 #444 #444 transparent;
}

.tabs>li.active span {
  background-color: #444;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .tabs.three li {
    width: 22%;
  }
  .tabs.four li {
    width: 22%;
  }
}

@media (max-width: 992px) {
  .tabs.four li {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .tabs.four li {
    width: 18.5%;
  }
  .tabs>li span {
    padding: 11px 6px;
  }
  .tabs>li .tbno {
    display: none;
  }
}

@media (max-width: 400px) {
  .tabs.four li {
    width: 17%;
  }
}
代码语言：javascript
复制
<ul class="tabs four">
  <li><span>Booking</span>
    <div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
    <div class="tbno">4</div>
  </li>
</ul>

​

Source

票数 2
EN

Stack Overflow用户

发布于 2017-06-28 18:25:07

只需在代码中添加重置css，并进行少量编辑，即可在所有浏览器中呈现相同的视图。

​

代码语言：javascript
复制
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tabs.three li {
	width: 31.4%;
}
.tabs.four li {
	width: 23%;
}
.tabs > li {
	position: relative;
	overflow: visible;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	float: left;
}
.tabs > li + li {
	margin-left: 0;
}
.tabs > li:first-child {
	border-left: 0;
}
.tabs > li:last-child {
	border-right: 0;
}
.tabs > li span {
	border-radius: 0;
	background-color: #e04411;
	display: inline-block;
	padding: 12px 20px;
	color: #fff;
	width: 100%;
}
.tabs > li .tbno {
	position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: 5px;
    background: rgba(255,255,255,0.8);
    color: #333;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
}
.tabs > li:last-child .tbno {
    right: -30px;
}
.tabs > li .nav-arrow {
	position: absolute;
	top: 0px;
	right: -30px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20px 10px 20px 20px;
	border-color: #fff #fff #fff #e04411;
	z-index: 150;
}
.tabs > li .nav-wedge {
	position: absolute;
	top: 0px;
	left: -20px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20px 0 20px 20px;
	border-color: #e04411 #eeeeee #e04411 transparent;
	z-index: 150;
}
.tabs > li.active .nav-arrow {
	border-color: #fff #fff #fff #444;
}
.tabs > li.active .nav-wedge {
	border-color: #444 #444 #444 transparent;
}
.tabs > li.active span {
	background-color: #444;
	color: #fff;
	width: 100%;
}

@media (max-width: 1200px) {
.tabs.three li {
	width: 22%;
}
.tabs.four li {
	width: 22%;
}
}

@media (max-width: 992px) {
.tabs.four li {
	width: 20%;
}
}

@media (max-width: 640px) {
.tabs.four li {
	width: 18.5%;
}
.tabs > li span {
	/*padding: 11px 6px;*/
}
.tabs > li .tbno {
	display:none;
}
}

@media (max-width: 400px) {
.tabs.four li {
	width: 17%;
}
}
代码语言：javascript
复制
<ul class="tabs four">
  <li><span>Booking</span>
  	<div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
  	<div class="tbno">4</div>
  </li>
</ul>

​

票数 2
EN

Stack Overflow用户

发布于 2017-06-28 18:20:10

​

代码语言：javascript
复制
.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs.three li {
  width: 31.4%;
}

.tabs.four li {
  width: 23%;
}

.tabs>li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  float: left;
}

.tabs>li+li {
  margin-left: 0;
}

.tabs>li:first-child {
  border-left: 0;
}

.tabs>li:last-child {
  border-right: 0;
}

.tabs>li span {
  border-radius: 0;
  background-color: #e04411;
  padding: 10px;
  display: inline-block;
  padding: 11px 20px;
  color: #fff;
  width: 100%;
}

.tabs>li .tbno {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}

.tabs>li:last-child .tbno {
  right: -30px;
}

.tabs>li .nav-arrow {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 21px 10px 21px 20px;
  border-color: #fff #fff #fff #e04411;
  z-index: 150;
}

.tabs>li .nav-wedge {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 21px 0 21px 20px;
  border-color: #e04411 #eeeeee #e04411 transparent;
  z-index: 150;
}

.tabs>li.active .nav-arrow {
  border-color: #fff #fff #fff #444;
}

.tabs>li.active .nav-wedge {
  border-color: #444 #444 #444 transparent;
}

.tabs>li.active span {
  background-color: #444;
  color: #fff;
  width: 100%;
}

@media (max-width: 1200px) {
  .tabs.three li {
    width: 22%;
  }
  .tabs.four li {
    width: 22%;
  }
}

@media (max-width: 992px) {
  .tabs.four li {
    width: 20%;
  }
}

@media (max-width: 640px) {
  .tabs.four li {
    width: 18.5%;
  }
  .tabs>li span {
    padding: 11px 6px; height:20px;
  }
  .tabs>li .tbno {
    display: none;
  }
}

@media (max-width: 400px) {
  .tabs.four li {
    width: 17%;
  }
}
代码语言：javascript
复制
<ul class="tabs four">
  <li><span>Booking</span>
    <div class="tbno">1</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Services</span>
    <div class="tbno">2</div>
    <div class="nav-arrow"></div>
  </li>
  <li class="active">
    <div class="nav-wedge"></div>
    <span>Confirmation</span>
    <div class="tbno">3</div>
    <div class="nav-arrow"></div>
  </li>
  <li>
    <div class="nav-wedge"></div>
    <span>Payment</span>
    <div class="tbno">4</div>
  </li>
</ul>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44799646

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档