mac和windows上的CSS差异

Question

我有一些CSS应用于几个div。它看起来在Windows上都很好，但是在鼠标悬停的情况下它在Mac上表现不同。

可以看到行为here。如果您可以管理在Mac和Windows上打开它，您会注意到差异。

如果有人能告诉我如何让它的行为与Windows上的行为相似，我将不胜感激。同样，我希望它的行为与Windows上的行为一样。

我也会在这里显示我的代码。

html

<div class="goal" >
<div class="top-layer" >
    <div class="component">
        <select class="component-select">
            <option value="">select me </option>
          <option value="">option one</option>
          <option value="">option two</option>
          <option value="">option three</option>              
        </select>
        <span id="width_tmp"></span>
    </div>
    <div class="period" >
      <select class="period-select">
            <option value="">something</option>                
        </select>
        <span id="width_tmp"></span>
    </div>
    <div class="close clickable" >X</div>
</div>        

和CSS，

.noselect, .clickable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 }
.clickable {
cursor: pointer;
/*border: 1px solid transparent;*/
 }
.clickable:hover {
/*border: 1px solid #4D7994;*/
background: #3f6379;  
}
[contenteditable="true"].single-line {
white-space: nowrap;
overflow: hidden;
display: inline-block;
margin-bottom: -7px;
height: 12px;
max-width: 60px;
}
[contenteditable="true"].single-line br {
display:none;

}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
.goal {
position: relative;
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 14px;
margin-bottom: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.goal span[contenteditable=true] {
padding: 5px;
border: 1px solid #5A8EAE;
padding-left: 2px;
}
.goal span[contenteditable=true]:focus {
background-color: white;
color: black;
border: 1px solid #5A8EAE;
min-width: 10px;
}
.top-layer{
width: 100%;
height: 33px;
float: left;
font-size: 12px;
font-weight: bold;;
}
.component{
float: left;
width: 63%;
padding: 2.5% 3% 3% 2%;    
}
.period{
float: left;
padding-top: 10px;    
}
.close{
float: right;
padding: 2.8%;
border-left: 1px solid #9FBDCF;
}
select.period-select {
border: 0 !important;  /*Removes border*/
-webkit-appearance: none;  /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style      for fonts*/
border-radius: 2px;
background-color: #5A8EAE;
color: white;
font-weight: bold;
width:auto;
direction: ltr;
float: right;
font-size: 12px;
padding: 3px 0;
margin-top: -6px;
}
select.period-select:hover, select.component-select:hover {
-webkit-appearance: menulist;
background-color: #3f6379;
color: white;    
}
select.component-select  {
border: 0 !important;  /*Removes border*/
-webkit-appearance: none;  /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
background-color: #5A8EAE;
font-size: 12px;
font-weight: bold;
width:240px ;
padding: 3px 0;
margin-top: -6px;
padding-left:0px;
margin-left:0px;  
}
select:hover {
cursor: pointer;
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
}