Html Mac与Windows的CSS问题

我一直在为搜索栏制作表单，但我遇到了一个问题。在我的Windows PC上，我看到搜索栏是我编码的，但当我在Mac上查看时，它的宽度不同

（都使用谷歌浏览器）

Windows（我希望它是什么样子）

Mac（我希望它和Windows一样）

HTML:

看起来您使用的是固定宽度。你可以在这里做几件事

1） 将文本输入和按钮输入设置为固定宽度，以便它们占用搜索框的必要空间（记住要考虑填充/边距）

---

2） 从搜索框中删除宽度，使其仅与其中的子项一样宽。

我已经为这些输入提供了宽度，因为不同的浏览器正在应用它们自己的css，而您没有覆盖它们。因此，定义这些宽度，可以更好地控制元素的外观。所以，试试看，我刚刚在ie9上也在浏览器堆栈上进行了测试，它运行良好，可以使用您想要的填充。

请在此处添加有意义的代码。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！好的，谢谢，很抱歉我是新手。你也应该在不同的浏览器中测试。不过，我看不到这些元素（firefox/firebug）有任何空白。这是你可能想要的。（左边距：5px；按钮上的空白处修复了firefox）。另外，看看用css（宽度：200px；或其他什么）设置像素宽度，而不是字符大小。。可能是一个潜在的解决办法。尝试将它应用到您编写的所有4个CSS选择器上它在Mac上运行良好我如何在Windows上显示它？此外，我还尝试为searchBarHold添加一个宽度，通过将搜索推到搜索栏下方，即使它是“宽度：10px；”，也会把它弄得更糟@Rahul try我刚刚在浏览器堆栈上以及ie9上进行了测试，它可以正常工作fine@Rahul我已经给出了这些输入的宽度，因为不同的浏览器正在应用它们自己的css，而您并没有覆盖它们。因此，定义这些宽度，可以更好地控制元素的外观。

<div id="searchBox">
<div id="searchBarHold">
<input type="text" class="searchBar" size="40" /><input type="button" value="SEARCH" class="searchButton" />
</div>
</div>

#searchBox {width:368px;height:45px;background:url(../images/gradient.png) #333;border-radius:5px;float:left;}

#searchBarHold {padding:7px;}

.searchBar {padding:5px;width:border-radius:3px;border:none;}

.searchButton {height:27px;border-left:1px #f98923 solid;border-right:1px #f98923 solid;border-bottom:1px #f9b233 solid;border-top:1px #ffd797 solid;background:#f9b233;color:#fff;border-radius:3px;font-weight:900;}