Question

.continue-btn {
    border: 2px solid #000;
    border-radius: 0px!important;
    width: 100%;
    text-align: center;
    padding: 0px;
    line-height: 55px;
    color: #000;
    margin: 6% 0%;
}
.heading-one {
    font-size: 14pt;
    font-family: Nexabold;
}

<div class="" id="continue-page2" >
	<a class="btn continue-btn heading-two" href="#"> CONTINUE   <span class="fa fa-arrow-right "></span></a>
</div>

在Firefox中，跨度显示在按钮的下一行。如果我在CSS中进行了更改，则会在Chrome中受到影响。

Answer 1

在Firefox Quantum 59.0.2（64位）中以下代码工作正常。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
 .continue-btn {
    border: 2px solid #000;
    border-radius: 0px!important;
    width: 100%;
    text-align: center;
    padding: 0px;
    line-height: 55px;
    color: #000;
    margin: 6% 0%;
}
.heading-two {
    font-size: 14pt;
    font-family: Nexabold;
}

</style>
</head>
<body>



<div class="" id="continue-page2" >
    <a class="btn continue-btn heading-two" href="#"> CONTINUE   
    <span class="fa fa-arrow-right"></span></a>
</div>


</body>
</html>

Answer 2

请参阅下面的代码。希望这对你有用。

#continue-page2 {
  border: 2px solid #000;
  display: inline-block;
  overflow: hidden;
}
#continue-page2 .btn {
  float: left;
  line-height: 40px;
  padding-left: 25px;
  text-decoration: none;
  color: #000000;
}

#continue-page2 span {
  border-left: 2px solid #000;
  float: right;
  background-color: #831A24;
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  margin-left: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="continue-page2" >
   <a class="btn continue-btn heading-two" href="#">CONTINUE
    <span class="fa fa-arrow-right"></span></a>
 </div>

float：右侧适用于Chrome，但不适用于Firefox

2 个答案: