CSS标签在Mozilla Firefox中无法正常显示

Question

我使用css显示右侧角度的选项卡（向导类型）。它与Chrome＆amp; IE 11.但是在Mozilla Firefox中，它在底部显示了一个额外的一行（见屏幕截图）：

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

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication1">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Styles/ComboBoxes.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <Style TargetType="local:MyComboBox" BasedOn="{StaticResource YourComboBoxStyle}">
    </Style>
</ResourceDictionary>

.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%;
  }
}

Answer 1

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

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%;
}
}

<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>

Answer 2

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

.tabs>li span{
  line-height: 1;
  height: 40px;
  box-sizing: border-box;
}

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Source

Answer 3

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

.tabs>li span元素的高度计算如下：

padding-top + line-height + padding-bottom等于11px + line-height + 11px。 由于line-height的默认值是正常的，因此在浏览器中会出现差异。因此.tabs>li span的最终高度不确定。但箭头高度仅为border-top-width + border-bottom-width，这是一个固定值（40px）。然后当.tabs>li span的高度大于40px时，会产生上述效果。

因此，您只需将.tabs>li span设置为line-height: 18px即可满足11px + 18px + 11px = 40px。