css - <div> 在 Chrome 或 Safari 中无法正确定位，但在 Firefox 中可以完美运行

Question

我正在重做我的网站设计，此时我在页面的一侧有一个弹出式订阅 div。可以看我的草稿here :

它在 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=freedomrequireswings&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' 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:如果您对我的网站设计稿有任何批评或建议，请告诉我!我很想听听他们的声音。

Answer 1

尝试为#subscribe 锁定宽度:240px。 (也许不是 240，但大约)