请问 chrome 和 360 极速模式 渲染页面不一样

Question

一开始我还以为 360 极速模式是和 chrome 是同样的渲染页面，后来发现360极速模式的字体 width，各种 margin height都是比chrome更大一些，请问怎么能针对 360 极速模式作一个 css hack？或是有别的方法解决这些问题？谢谢了。

Answer 1

360 浏览器技术模式的内核是基于Chrome的开源版Chromium开发的。
各种HTML元素样式上在各种浏览器上默认样式会有所区别，你可以使用Normalize.css，只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。

Normalize.css的作用：

• 保护有用的浏览器默认样式而不是完全去掉它们

• 一般化的样式：为大部分HTML元素提供

• 修复浏览器自身的bug并保证各浏览器的一致性

• 优化CSS可用性：用一些小技巧

如下的代码，截取自Normalize.css。

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
/**
 * 移除了在IE 8/9/10下a标签img的边框(旧版本的IE浏览器下有蓝色边框)
 */
img {
  border: 0;
}

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct font properties not being inherited.
 * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
 /**
 * 纠正了表单标签字体不继承的问题。
 * 在各个浏览器中外边距不统一
 */

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

Answer 2

可以用 js 识别，再通过 js 把适配样式添加到 html 中

function is360se(){
    var where = "suffixes", value = "dll", name = "description", nameReg = /fancy/;
    var mimeTypes = window.navigator.mimeTypes, i;
    for (i in mimeTypes) {
        if (mimeTypes[i][where] == value) {
            if (nameReg.test(mimeTypes[i][name])) return false;
        }
    }
    return true;
}

JS判断是否360安全浏览器极速内核的方法: 链接

Answer 3

建议放demo或者链接，360 极速模式使用渲染引擎版本一般会落后于chrome，而且有部分定制，但是差异都体现在一些bug和新特性上，你说的这个margin height如果都给了指定值怎么可能会不一样，不知道是不是表述有问题