OS X正在搞乱我的css，如何修复

Question

所以我制作了一个表单，并添加了CSS的样式，它在Windows上看起来很好但是当我使用我的Mac进入表单时它看起来不同，一切都更小并且改变了颜色。 为什么OS X会改变我的CSS？ 有没有办法解决这个问题？

问题图片：http://i.tinyuploads.com/zq3rtp.png

我的Mac上的每个浏览器都会出现此问题

HTML代码：

<p>Name:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="name">
<br /><br />
<p>Email:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="email">
<br /><br />
<p>Website:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="website">
<br /><br />

<p>Priority:<span class="Req-ourForm">*</span></p>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select class="pri" name="priority" size="1" required="required">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
<br />

CSS代码：

input, textarea { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 200px;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

input.sub { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 300px;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

input.captcha { 
    padding: 9px;
    border: solid 1px #C9C9C9; 
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 45px;
    text-align: center;
    background: #e2e2e2 url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }

textarea {
    margin-top: 4px;
    width: 380px;
    max-width: 380px;
    max-height: 150px;
    height: 150px;
    line-height: 150%;
    }

input:hover, textarea:hover,
input:focus, textarea:focus { 
    border-color: #b3b3b3;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
    border: 1px solid rgba(81, 203, 238, 1);
    }

.form label { 
    margin-left: 10px;  
    color: #999999; 
    }

.submit input {
    width: auto;
    padding: 9px 15px;
    background: #617798;
    border: 0;
    font-size: 14px;
    color: #C9C9C9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }


/*CSS FOR DROP DOWN*/
label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 160px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.pri {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 85px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.aop {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 60px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}
select.stu {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 65px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

第二个问题是按钮出于某种原因是白色而不是蓝色， IMG：http://i.tinyuploads.com/pW0E24.png

按钮的HTML代码：

<button id="continue-link" class="button button rect" type="submit"> 
<span>
    <span class="effect"></span>
    <span class="label"> 
        SEND    
    </span>
</span>
</button>


<button id="continue-link" class="button button rect" type="reset"> 
<span>
    <span class="effect"></span>
    <span class="label"> 
        CLEAR ALL    
    </span>
</span>
</button>

按钮的CSS：

/*BUTTON DESIGN*/
.button {
    background-color: transparent;
    border: 0 none;
    border-collapse: separate;
    cursor: pointer;
    display: inline-block;
    font: 11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    overflow: visible;
    position: relative;
}
.button > span {
    background: url("common/src/store/base/patterns/buttons/css/bg/button_colors.png") repeat-x scroll 0 0 / 8px 22px #224272;
    border: 1px solid #224272;
    border-radius: 11px 11px 11px 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: white;
    display: inline-block;
    font: 12px/1 "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
    letter-spacing: 0;
    opacity: 1;
    padding: 4px 25px;
    position: relative;
    text-align: center;
    transition: opacity 800ms ease 0s;
    white-space: nowrap;
    word-spacing: 0;
}
.button:-moz-focusring {
    outline: 0px dotted;
}
.ns .button, .button.rect {
    background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0 transparent;
    border: 1px solid #1992D9;
    border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.ns .button:hover, .ns .button:focus, .button.rect:hover, .button.rect:focus {
    background: linear-gradient(#2F90D5, #0351B7) repeat scroll 0 0 transparent;
}
.ns .button:active, .ns .button.active, .button.rect:active, .button.rect.active {
    box-shadow: 0 1px 0 #FFFFFF, 0 0 9px rgba(0, 0, 0, 0.5) inset;
}
.ns .button > span, .button.rect > span {
    background: none repeat scroll 0 center transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 13px;
    line-height: 15px;
    padding: 4px 20px; /*BUTTON SIZE*/
}

Answer 1

您的按钮不是蓝色的原因是因为您没有声明webkit渐变。我看了你的样式表。为各种浏览器添加正确的前缀，如下所示 -

.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -moz-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -webkit-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background:  -o-llinear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-appearance: none;
}

这可确保您的渐变适用于支持它的所有浏览器。