Mac与Windows的CSS问题

我一直在寻找一个搜索栏的表单，并且遇到了问题。在我的Windows PC上，我发现搜索栏是我编码的，但是当我在Mac上查看时，它的宽度有所不同。Mac与Windows的CSS问题

（无论使用谷歌浏览器）

的Windows（我怎么想它是）

enter image description here

MAC（我想这是一样的Windows）

enter image description here

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

来源

2013-02-11 Rahul

请在这里添加有意义的代码。不要只是链接到需要修复的网站 - 否则，一旦问题解决，这个问题将会给未来的访问者带来任何价值。发布 [简短，独立，正确的示例（SSCCE）]（http://www.sscce.org/），这表明您的问题将帮助您获得更好的答案。有关更多信息，请参见[我网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – 2013-02-11 22:59:20

好的谢谢，对不起，我是新来的。 – Rahul 2013-02-11 23:00:39

你也应该在不同的浏览器中测试。虽然（firefox/firebug），但我看不到任何这些元素的边距。这可能是你想要的。（margin-left：5px;在按钮上修复它为firefox）。另外，看看用CSS设置宽度（宽度：200px;或其他），而不是字符大小。 – 2013-02-11 23:01:47

看起来像使用固定宽度。夫妇可以在这里做的事情。

1）让您的文本输入和按钮输入固定宽度，以便它们占用的搜索框的必要的空间（记得要占填充/利润率）

2）从搜索盒卸下宽度，以便它仅与其中的孩子一样宽。

来源

2013-02-11 23:04:07 Lee

我已经给出了这些输入的宽度，因为不同的浏览器正在应用他们自己的css，而不是重写。所以定义这些宽度，你将会对元素的外观有更多的控制。所以，试试this，我刚刚在ie9上测试了浏览器堆栈，并且它工作正常，并且可以使用您想要的填充进行播放。

来源

2013-02-11 23:09:13

它在Mac上的工作正常，我如何在Windows上显示它？此外，我试图增加一个宽度searchBarHold它只是通过推动搜索栏下的搜索，即使它是'宽度：10px;'甚至更多。 – Rahul 2013-02-11 23:13:45

@Rahul尝试[this]（http://cdpn.io/grqtB）我刚刚在ie9上测试了浏览器堆栈，并且它工作正常 – 2013-02-11 23:26:26

@Rahul我给出了这些输入的宽度，因为不同的浏览器正在应用它们自己的CSS，你不是压倒一切的。所以定义这些宽度，你将会对元素的外观有更多的控制。 – 2013-02-11 23:29:01

Mac与Windows的CSS问题

回答

相关问题