html - Mac 与 Windows 的 CSS 问题

Question

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

（都使用谷歌浏览器）

Windows（我想要的样子）

Mac（我希望它和 Windows 一样）

HTML：

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

CSS

#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;}

Answer 1

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

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

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

Answer 2

我已经为这些输入提供了宽度，因为不同的浏览器正在应用它们自己的 css，而您并没有覆盖这些 css。所以定义这些宽度，你将对元素的外观有更多的控制。所以，试试这个，我刚刚在浏览器堆栈以及 ie9 上进行了测试，它工作正常，可以使用你想要的填充。