<div>无法在Chrome或Safari中正确定位，但在Firefox </div>中效果很好

Question

我正在重做我的网站设计，此时我在页面的侧面有一个popout订阅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上试过。当我将位置：右侧属性更改为-233px时，它会在Chrome和Safari中正常隐藏，但它在Firefox中太过分了。

我想知道是否有人可以帮助我吗？

PS：如果您对我的网站设计草案有任何批评或建议，请告诉我！我很乐意听到他们的声音。

Answer 1

尝试锁定宽度：#pubscribe为240px。 （可能不是240，但大约是）