我正在重做我的网站设计,此时我在页面的一侧有一个弹出式订阅 div。你可以在这里看到我的草稿:
它在 Firefox 中完美运行,但在 Chrome 和 Safari 中却有点突出。
这是我的 HTML:
<div id='Subscribe' style='z-index:10;position:fixed; top:376px; right:-231px; padding-left: 15px;display: inline-block;'>
<table background='http://4.bp.blogspot.com/-gVytZ17cmL0/UAVf1PGc_tI/AAAAAAAABjM/rFNd4dqfwF4/s1600/background.PNG' cellpadding='5' cellspacing='0' id='side' style='border-left: 10px solid #565656; box-shadow: 0px 0px 5px #898989;' width='35px'>
<tbody>
<tr style='box-shadow: 0 1px 4px -3px #5E5E5E;'>
<td>
<font style='font-family:Lobster; color:#1bb4c6;font-size:18px;'>Subscribe</font><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' id='search-form1' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=freedomrequireswings', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px solid #ccc;text-align:left;margin-top:-20px;' target='popupwindow'>
<p>
<table>
<tr>
<td>
<input name='email' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='box-shadow: 2px 2px 2px #121212; font-family:Segoe UI, Yanone Kaffeesatz, trebuchet MS;height:30px;padding-left:5px;padding-right:5px;font-size:16px;color:#636363;' type='text' value='email@example.com' vinput=''/>
<input name='uri' type='hidden' value='FreedomRequiresWings'/>
<input name='loc' type='hidden' value='en_US'/>
</td>
<td>
<div style='padding-top:3px;'>
<input src='http://1.bp.blogspot.com/-4zEgvyYwgH0/UAnajptLwxI/AAAAAAAABkw/lI_MFSWY1P8/s1600/sub%252B.png' style='height:49px !important; width:49px !important;' type='image'/>
</div>
</td>
</tr>
</table>
</p>
</form>
</td>
</tr>
</tbody>
</table>
</div>
和CSS:
#Subscribe:hover {
transform: translate(-231px,0);
-ms-transform: translate(-231px,0);
-webkit-transform: translate(-231px,0);
-o-transform: translate(-231px,0);
-moz-transform: translate(-231px,0);
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
position:fixed;
display: inline-block;
}
#Subscribe {
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
display: inline-block;
}
#search-form1 input {
width: 150px;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
#search-form1 input:focus {
width: 250px;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
#search-form1 是要输入的电子邮件地址的表单。之所以称为 search-form1,是因为我从教程中复制了该特定代码并且没有更改它。效果很好,所有功能都可以正常工作,只是 div 无法在 Chrome 或 Safari 中正确隐藏。还没有在 Opera 上尝试过。当我将 position:right 属性更改为 -233px 时,它会在 Chrome 和 Safari 中正确隐藏,但在 Firefox 中太远了。
我想知道是否有人可以帮助我解决这个问题?
PS:如果您对我的网站设计稿有任何批评或建议,请告诉我!我很想听听他们的意见。