适用于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>

<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）使您的文本输入和按钮输入固定宽度，以便占用searchBox所需的空间（记得考虑填充/边距）

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

Answer 2

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