Mac 与 Windows 的 CSS 问题答案

【问题标题】：CSS Issues for Mac vs WindowsMac 与 Windows 的 CSS 问题
【发布时间】：2013-01-27 03:58:47
【问题描述】：

我一直在为搜索栏设计一个表单，但遇到了一个问题。在我的 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;}

【问题讨论】：

请在此处添加有意义的代码。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Short, Self Contained, Correct Example (SSCCE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
好的，谢谢，对不起，我是新手。
您也应该在不同的浏览器中进行测试。不过，我认为这些元素中的任何一个都没有边距（firefox/firebug）。这可能是您想要的。（margin-left：5px；在按钮上为 Firefox 修复）。另外，看看用css设置宽度（宽度：200px；或其他），而不是字符大小。
你试过box-sizing: border-box; .. 可能是一个潜在的修复。尝试将其应用于您编写的所有 4 个 CSS 选择器

标签： html css windows macos

【解决方案1】：

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

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

2) 从您的 searchBox 中删除宽度，使其仅与其中的子项一样宽。

【讨论】：

【解决方案2】：

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

【讨论】：

它在 Mac 上运行良好我如何在 Windows 上显示它？我还尝试为 searchBarHold 添加一个宽度，即使它是“宽度：10px;”，它也会通过将搜索推到栏下而变得更加混乱。
@Rahul try this 我刚刚在浏览器堆栈以及 ie9 上进行了测试，效果很好
@Rahul 我已经为这些输入提供了宽度，因为不同的浏览器正在应用它们自己的 css，而您并没有覆盖它们。因此定义这些宽度，您将对元素的外观有更多的控制。