Safari＆＃34;提交＆＃34;按钮在屏幕上调整大小时消失

时间：2015-08-04 02:36:21

标签： html css

我有一个分为2列的联系表格。在Firefox和Chrome上一切正常，但在Safari中，当我的列以较小的屏幕尺寸堆叠或在移动设备上时，提交按钮会在悬停时消失。

这里是fiddle

我的HTML和CSS是：

＆＃13;
＆＃13; 
@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
    font-size: 0.6em;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
	body{
			font-family: Roboto, arial, helvetica, sans-serif;
			color: #F2F2F2;
		}		
		
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
			font-size: 4em;
            font-weight: 900;
		}

h1#h1ssl{
			font-size: 3.2em;
            font-weight: 900;
		}

h2#h2a1{
			font-family: Abril Fatface;
            font-size: 4em;
            font-weight: 900;
            color: #840000;
		}

h2#h2a2{
			font-family: Abril Fatface;
            font-size: 2em;
            font-weight: 900;
            color: #840000;
		}
 h2#h2b1{
            font-size: 2em;
            font-weight: 900;
            color: #00cccc;
            letter-spacing: 1px;
            padding-bottom: 8px;
		}

p{
			font-size: 2em;
		}       
   
 p#p1c2a{
			font-size: 1em;
            color: #efefef;
		} 
}
    
.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}

div#adhoc {
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}

/*========== Contact Form ===========*/

label {
    display:block;
    letter-spacing:2px;
}

input, textarea {
    font-family: Roboto, arial, helvetica, sans-serif;
	width:439px;
	height:22px;
	background:#efefef;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
       -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.select-field {
    font-family: Roboto, arial, helvetica, sans-serif;
    padding: 5px 8px;
	width:459px;
    font-size:0.9em;
    margin-top:3px;
        border: none;
    box-shadow: none;
    background:#efefef;
    background-image: none;
    -webkit-appearance: none;
       -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.select-field:focus {
    outline: none;
}

textarea {
    resize: none;   
}


.form-style .input-field:focus,
.form-style:focus,
.form-style .textarea-field:focus,  
.form-style .select-field:focus{
    border: 1px solid #999999;
}

.form-style input[type="button"],
.form-style input[type="submit"] {
     width:127px;
    height:38px;
    background-color: #00cccc;
    color: #efefef;
    font-weight: 600;
    letter-spacing:2px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}
.form-style input[type="button"]:hover,
.form-style input[type="submit"]:hover {
    opacity:.9;
}
.form-style .success{
	background: #444;
	padding: 5px 10px 5px 10px;
	margin-top: 10%;
    margin-bottom: 10%;
	border: none;
    font-size: 3em;
	font-weight: 900;
	color: #00cccc;	
}
.form-style .error {
	background: #444;
	padding: 5px 10px 5px 10px;
	margin-top: 10%;
    margin-bottom: 40px;
	border: none;
    font-size: 3em;
	font-weight: 900;
	color: #ff6600;
}

/*========== Columns ===========*/
div.col-2a {     
    text-align: left;
    padding-left: 4%;
    padding-right: 4%;
}
        
div.col-2b {
     -webkit-column-count: 2; 
    -webkit-column-width: 440px;    
    -webkit-column-gap: 40px;      
    padding-top: 20px;
    padding-bottom: 5%;
    text-align: left;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    -moz-column-width: 440px;
    -moz-column-gap: 40px;      
    padding-top: 20px;
    padding-bottom: 5%;
    text-align: left;
    /* Firefox */
    column-count: 2;
    column-width: 440px;            
    column-gap:40px;      
    padding-top: 20px;
    padding-bottom: 5%;
    text-align: left;
}



 /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
 @media only screen and (min-width : 320px) {
        h1{
			font-size: 1em;
		}
     h1#h1ssl{
			font-size: 1.8em;
		}
     
     h2#h2a1{
            font-size: 1.1em;
		}

     h2#h2a2{
            font-size: 1em;
		}
		p{
			font-size: 1em;
		} 
      p#p1e{
			font-size: 1.5em;
		} 
       p#p1c2a{
			font-size: 1em;
		} 
        a{
    font-size: 1em;
}
input, textarea {
	width:260px;    
    }
.select-field {
	width:280px;
}
     

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 440px) {
        h1{
			font-size: 1.25em;
		}
         h1#h1ssl{
			font-size: 3.2em;
		}
     
        h2#h2a1{
            font-size: 1.5em;
		}

        h2#h2a2{
            font-size: 1em;
		}
        
		p{
			font-size: 1em;
		} 
        p#1e{
			font-size: 1.5em;
		} 
          p#p1c2a{
			font-size: 1em;
		} 
              a{
    font-size: 1em;
}
     input, textarea {
	width:439px;
    }
        .select-field {
	width:459px;
}
        
    }
    @media only screen and (min-width : 600px) {
        h1{
			font-size: 2em;
		}
        h1#h1ssl{
			font-size: 3.2em;
		}
        h2#h2a1{
            font-size: 2em;
		}

        h2#h2a2{
            font-size: 2em;
		}
		
		p{
			font-size: 1em;
		} 
          p#p1c2a{
			font-size: 1em;
		} 
              a{
    font-size: 0.9em;
}
    }
     @media only screen and (min-width : 740px) {
        h1{
			font-size: 2.5em;
		}
        h2#h2a1{
            font-size: 2.5em;
		}

        h2#h2a2{
            font-size: 2em;
		}
		
		p{
			font-size: 1.25em;
		} 
           p#p1c2a{
			font-size: 1.25em;
		} 
              a{
    font-size: 0.8em;
}
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 900px) {
        h1{
			font-size: 3em;
		}
        h2#h2a1{
            font-size: 3em;
		}

        h2#h2a2{
            font-size: 2em;
		}
		
		p{
			font-size: 1.5em;
		} 
          p#p1c2a{
			font-size: 1em;
		} 
              a{
    font-size: 0.8em;
}
        div.col-2a {
    -webkit-column-count: 2; 
    -webkit-column-width: 440px;    
    -webkit-column-gap: 40px;
    -webkit-text-align: left;
    -webkit-padding-left: 4%;
    -webkit-padding-right: 4%;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    -moz-column-width: 440px;
    -moz-column-gap: 40px;
    -moz-text-align: left;
    -moz-padding-left: 4%;
    -moz-padding-right: 4%;
    /* Firefox */
    column-count: 2;
    column-width: 440px;      
    column-gap:40px;      
    text-align: left;
    padding-left: 4%;
    padding-right: 4%;
}
        
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 1040px) {
        h1{
			font-size: 3.5em;
		}
        h2#h2a1{
            font-size: 3.5em;
		}

        h2#h2a2{
            font-size: 2em;
		}
		
		p{
			font-size: 1.75em;
		} 
          p#p1c2a{
			font-size: 1em;
		} 
              a{
    font-size: 0.6em;
}
        div.col-2a {
    -webkit-column-count: 2; 
    -webkit-column-width: 440px;    
    -webkit-column-gap: 40px;
    -webkit-text-align: left;
    -webkit-padding-left: 4%;
    -webkit-padding-right: 4%;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    -moz-column-width: 440px;
    -moz-column-gap: 40px;
    -moz-text-align: left;
    -moz-padding-left: 4%;
    -moz-padding-right: 4%;
    /* Firefox */
    column-count: 2;
    column-width: 440px;      
    column-gap:40px;      
    text-align: left;
    padding-left: 4%;
    padding-right: 4%;
}
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        h1{
			font-size: 4em;
		}
        h2#h2a1{
            font-size: 4em;
		}

        h2#h2a2{
            font-size: 2em;
		}
		
		p{
			font-size: 2em;
		} 
          p#p1c2a{
			font-size: 1em;
		} 
              a{
    font-size: 0.6em;
}
        div.col-2a {
    -webkit-column-count: 2; 
    -webkit-column-width: 440px;    
    -webkit-column-gap: 40px;
    -webkit-text-align: left;
    -webkit-padding-left: 4%;
    -webkit-padding-right: 4%;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    -moz-column-width: 440px;
    -moz-column-gap: 40px;
    -moz-text-align: left;
    -moz-padding-left: 4%;
    -moz-padding-right: 4%;
    /* Firefox */
    column-count: 2;
    column-width: 440px;      
    column-gap:40px;      
    text-align: left;
    padding-left: 4%;
    padding-right: 4%;
}
    }
＆＃13; 
<div class="form-style" id="contact_form">
     <div id="contact_results"></div>
    <div class="col-2b" id="contact_body">
        <label><span>Name <span class="required">*</span></span></label>
            <input type="text" name="name" id="name" required="true" class="input-field"/>
        
        <label style="margin-top:20px;"><span>Email <span class="required">*</span></span> </label>
            <input type="email" name="email" required="true" class="input-field"/>
       
        <label style="margin-top:20px;"><span>Current Website</span></label>
            <input style="margin-bottom:20px;" type="text" name="website" required="false" class="input-field"/><br>
        
            <div style="display:inline-block;"><label for="subject"><span>I Want To</span></label>
            <select name="subject" class="select-field" placeholder="Choose something">
            <option value="Holder">Choose One...</option>
            <option value="New Site">Start fresh</option>
            <option value="Site Update">Add some lipstick</option>
            <option value="Other Design">Do something else</option>
            <option value="Saying Hi!">Just say Hi!</option>
            </select>
        
        <label for="field5" style="margin-top:20px;"><span>Tell Us More:<span class="required">*</span></span></label>
            <textarea name="message" id="message" class="textarea-field" required="true" placeholder="Share your dreams or say hello!" style="height: 108px;"></textarea>
        
        
        <label>
            <span></span><input type="submit" id="submit_btn" value="Submit" />
        </label></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果其他人有这个问题，那么对我有用的解决方案不是设置Opacity来控制按钮悬停效果我在按钮上使用了背景rgba值，一切正常

相关问题
最新问题