html - Safari "Submit"按钮在屏幕调整大小时悬停时消失

标签 html css

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

这是一个 fiddle

我的 HTML 和 CSS 是:

@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%;
}
    }
<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>

最佳答案

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

关于html - Safari "Submit"按钮在屏幕调整大小时悬停时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31799787/

上一篇：javascript - 如何获取从 ajax 调用接收的 HTML 标记的值

下一篇：当有太多选项时，HTML 选择列表选项会丢失其 CSS 字体样式

相关文章：

css - 有一个可调整大小的 div，以 px 为单位，最大宽度为 100%

html - ASP.NET MVC 和 HTML5

html - 使用 Bootstrap 集中对象

html - 停止表单输入框自动完成的正确方法是什么？

html - 如何在表格中的输入 td 上创建边框？

css - 媒体查询和百分比宽度导致 webkit 浏览器出现奇怪的 IMG 收缩行为

html - 如何将复选框和文本保持在同一行

HTML <tr> 标签和位置 :relative

html - 高度为 div 的 100%

html - 如何在溢出 :hidden 的容器中显示纯 css 工具提示

©2024 IT工具网  联系我们