輸入和textarea的邊框沒有出現在Safari瀏覽器

Question

我的表格的邊框是顯示了巨大的，除了Safari瀏覽器所有瀏覽器。有時它們根本不顯示，有時缺少一條邊。任何幫助都是極好的。你可以去這裏看看吧http://cmweb.design

這裏的HTML

​​

這裏的CSS：

*--- Contact ---*/ 

#contact{ 
    background-color: #181818; 
    display: table; 
    text-align: center; 
    width: 100%; 
} 

#contact article{ 
    display: table-cell; 
    padding: 100px; 
    vertical-align: middle; 
} 

#contact h2{ 
    color: white; 
    padding-bottom: 20px; 
} 

#contact p{ 
    font-size: 14px; 
    margin: 0 auto; 
    padding-bottom: 40px; 
    width: 50%; 
} 

form{ 
    font-family: 'Raleway', sans-serif; 
    -webkit-appearance: none; 
} 

#inputs{ 
    display: inline-block; 
} 

input{ 
    background-color: #181818; 
    border-color: #cfcfcf; 
    border-width: 0px 0px .5px 0px; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    border-style: solid; 
    color: #cfcfcf;; 
    display: inline-block; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
    height: 25px; 
    margin-right: 20px; 
    margin-top: 21px; 
    text-transform: uppercase; 
    -webkit-appearance: none; 
    width: 240px; 
} 

textarea{ 
    background-color: #181818; 
    border-color: #cfcfcf; 
    border-width: .5px; 
    border-style: solid; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    color: #cfcfcf; 
    display: inline-block; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
    height: 120px; 
    line-height: 25px; 
    min-width: 305px; 
    margin-top: 20px; 
    padding: 5px 10px; 
    text-transform: uppercase; 
    width: 10%; 
    -webkit-appearance: none; 
    vertical-align: top; 
} 

button{ 
    background: none; 
    border: .5px solid #cfcfcf; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    color: white; 
    display: inline-block; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
    margin-left: 20px; 
    margin-top: 20px; 
    padding: 50px 40px; 
    position: relative; 
    text-transform: uppercase; 
    vertical-align: top; 
} 

button::after{ 
    border-top: 70px solid rgba(101,70,84,0.5); 
    content: ""; 
    top: 25px; right: 0;left: 0; 
    position: absolute; 
    -webkit-transition: all .4s ease; 
    -moz-transition: all .4s ease; 
    -ms-transition: all .4s ease; 
    -o-transition: all .4s ease; 
    transition: all .4s ease; 
} 

button:hover::after{ 
    border-top: 70px solid rgba(227,228,217,0.5); 
    content: ""; 
    top: 25px; right: 0; left: 0; 
    position: absolute; 
} 

Answer 1

更改邊框寬度0.5到1

沒有這樣的單位爲半個像素:)

最小值爲1像素，顯然有些瀏覽器舍入到1，和其他人都向下取整爲0px。

HTML: Sub-pixel border。

input{ 
    background-color: #181818; 
    border-color: #cfcfcf; 
    border-width: 0px 0px 1px 0px; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    border-style: solid; 
    color: #cfcfcf;; 
    display: inline-block; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
    height: 25px; 
    margin-right: 20px; 
    margin-top: 21px; 
    text-transform: uppercase; 
    -webkit-appearance: none; 
    width: 240px; 
} 

textarea{ 
    background-color: #181818; 
    border-color: #cfcfcf; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
    color: #cfcfcf; 
    display: inline-block; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
    height: 120px; 
    line-height: 25px; 
    min-width: 305px; 
    margin-top: 20px; 
    padding: 5px 10px; 
    text-transform: uppercase; 
    width: 10%; 
    -webkit-appearance: none; 
    vertical-align: top; 
}