360极速模式和兼容模式对页面的影响

360浏览器模式不同都会对页面有一些出乎意料的效果的影响：

众所周知，360浏览器有两种模式：兼容模式和极速模式。两种模式下，兼容性不同，有时会导致页面效果不尽相同，各有差异。

但模式选择具体如何定的，尚且抛开不管，单就页面的一些兼容性处理来说，目前还远远不足以和google、firfox、等等其他PC浏览器和手机浏览器相媲美。

---

例如：

html代码如下

<div class="er-code">
	<img src="images/PictureCheckCode" id="CreateCheckCode" align="middle">
	<a class="refresh" onclick="myReload()"></a>
</div>

css代码如下

.er-code {
	position: absolute;
	top: 0;
	right: 0;
	width: 9.0625em;
	height: 2.5em;
	background: #999;
}
.er-code img {
	width: 6.5625em;
	height: 2.5em;
}
.er-code .refresh {
	width: 2.5em;
	height: 2.5em;
	background: url(../images/login/bg_refresh.png) no-repeat 0 0;
	background-size: 2.5em;
	float: right;
	cursor: pointer;
}

360浏览器模式如图所示：

页面效果 如下：

**提示：**如上图所示，验证码“6823”的 刷新按钮 出现了 错位 现象：

解决办法

修改代码后如下：

.er-code img {
	width: 6.5625em;
	height: 2.5em;
	float：left; /*如无此句代码，谷歌和火狐的浏览器也是正常的*/
}

---

另外，在两种不同的模式下，还有其他的问题，比如：

在 极速模式 下，页面效果是：

但是，在 兼容模式 下，就会出现如下图所示的等等问题：

所以有时候，兼容模式也不一定能达到最完美的效果。

出现上面的小问题，对于360所产生的差异效果，我也是醉醉的，还是要靠码农攻城狮在以后的工作和学习中继续发现和及时总结的。

以上代码和效果图仅供参考！

---

以上就是关于“ 360极速模式和兼容模式对页面的影响 ”的全部内容。”