这是一个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,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,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,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,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,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,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,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 ID="contact_form"> <div ID="contact_results"></div> <div ID="contact_body"> <label><span>name <span >*</span></span></label> <input type="text" name="name" ID="name" required="true" /> <label ><span>Email <span >*</span></span> </label> <input type="email" name="email" required="true" /> <label ><span>Current Website</span></label> <input type="text" name="website" required="false" /><br> <div ><label for="subject"><span>I Want To</span></label> <select name="subject" 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" ><span>Tell Us More:<span >*</span></span></label> <textarea name="message" ID="message" required="true" placeholder="Share your dreams or say hello!" ></textarea> <label> <span></span><input type="submit" ID="submit_btn" value="submit" /> </label></div> </div></div>解决方法 任何其他人都有这个问题的解决方案对我有用而不是设置不透明度来控制按钮悬停效果我在按钮上使用了背景rgba值,一切正常 总结
以上是内存溢出为你收集整理的html – Safari“提交”按钮在屏幕大小调整时悬停消失全部内容，希望文章能够帮你解决html – Safari“提交”按钮在屏幕大小调整时悬停消失所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）