跨不同浏览器定位答案

【问题标题】：Positioning On Across Different Browsers跨不同浏览器定位
【发布时间】：2013-03-21 17:02:29
【问题描述】：

当我创建网页时，我希望页面上的所有功能都放在不同浏览器中的相同位置。有时，当我在不同的浏览器上运行页面时，某些功能被放置在不同的位置。我使用这些变量来确定正在打开的浏览器是正确的，例如，我使用 if 语句来确定一些选项。

//var firefox = (navigator.userAgent.indexOf("Firefox") != -1);
//var opera = (navigator.userAgent.indexOf("Opera") != -1);
//var ie = (navigator.userAgent.indexOf("MSIE") != -1);
//var safari = (navigator.userAgent.indexOf("Safari") != -1);
//var scrome = (navigator.userAgent.indexOf("Chrome") != -1);

1.当某些功能放置在不同浏览器中的不同位置时，这样做是否是一种好方法？

2.当我使用'navigator.userAgent.indexOf(...)'时返回什么类型。它是布尔值还是某种返回参数位置的集合，就像哈希表一样？究竟返回什么类型？

【问题讨论】：

标签： javascript html browser cross-browser

【解决方案1】：

不同的浏览器可能有不同的初始位置行为，使它们行为相同的一个好做法是进行 CSS 重置。
navigator.userAgent是一个字符串对象，因此.indexOf(...)返回整数Number

【讨论】：

CSS 重置是什么意思？你能给我举个例子吗。我应该使用上面的代码吗？
两种浏览器可能以不同方式呈现同一页面的原因有上百万种。我不确定 CSS 重置是否有很大帮助。
例如，最初不同的浏览器可能会为 body 元素设置不同的边距。因此，要实现一致的布局，您需要针对不同的浏览器进行不同的处理。一个好的解决方案是我们首先删除所有浏览器默认样式，然后所有外观都将相同，我们可以为所有浏览器添加自定义样式。这称为 CSS 重置。一篇文章显示更多信息sixrevisions.com/css/css-tips/…
当然，如果你想做浏览器不同的动作和样式，一个不错的选择是 Modernizr：modernizr.com
所以我明白我应该为不同的浏览器创建不同的css文件。我是对的？

【解决方案2】：

(1) 不要根据用户代理字符串进行浏览器检测。这是非常不可靠的，而且在 2013 年非常不可靠。您想使用像 modernizr 这样的框架来检测支持哪些功能（哪些不支持）。 This 是一个好的开始。

(2) 不是一个集合，只是一个描述搜索到的字符串在原始字符串中的位置的数字。见here，或自己去了解：

typeof(navigator.userAgent.indexOf("foo"))

(3) 顺便说一句：发布初学者问题的好名字；）

【讨论】：

感谢您的回答。还有一个问题，我可以将上面的代码仅用于定位某些标签元素上的边距和填充吗？
请不要在 cmets 中提出新问题 - 而是更新原始问题。

【解决方案3】：

所以我想你正在寻找这个：

  <!--[if IE]> 
   <link rel="stylesheet" type="text/css" href="style.css" />
    <!-->

该代码应放置在页面的 Head 部分，您可以为每个浏览器指定一个多 CSS 页面，例如此链接用于 IE（Internet Explorer）

【讨论】：