盒子模型总结

最新推荐文章于 2022-05-12 17:29:24 发布

韩爽

最新推荐文章于 2022-05-12 17:29:24 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/qq_28534081/article/details/80982029

版权

对比

标准盒子模型中: 定义的width, 只包含content部分的宽度, 如果增加盒子的padding和border, 会增加盒子所占的整体宽度

ie盒子模型中: 定义的width, 是包含content的跨度, 还有左右两侧的padding还有border

兼容处理

1) ie浏览器文档注释

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->

通过上述方法, 在不同的浏览器中, 使用不同的class, 简单明了, 也不用也很多csshack

2) 对于360双核这种找抽浏览器，据说添加以下头部meta信息可以使得网页用webkit内核渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge：保持使用最高级别模式显示内容；

chrome=1：谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时实际上是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。

但实际上这个meta标识是ie浏览器所识别的，并不是公认的标准，所以用双核的浏览器会傲娇。当然360也会傲娇，所以有时你会发现360并不能总是（也可能是我本人rp差）以chrome内核渲染你的按现代标准开发的网页。

那么试试这个吧，添加：

<meta name="renderer" content="webkit">

这个meta标识是360自家实现的，表示强制要求360浏览器用chrome的内核渲染网页。

ok，一行代码搞定360绝大部分的兼容。

随笔

css实现三角形效果

<div class="box"></div>

.box {
   width: 0;
   height: 0;
   border: 50px #fff solid;
   border-bottom: none;
   border-top-color: red;
}

韩爽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型总结

对比标准盒子模型中: 定义的width, 只包含content部分的宽度, 如果增加盒子的padding和border, 会增加盒子所占的整体宽度ie盒子模型中: 定义的width, 是包含content的跨度, 还有左右两侧的padding还有border兼容处理&lt;!DOCTYPE html&gt;&lt;!--[if IE 8 ]&gt; &lt;html class="ie8" la...
复制链接

扫一扫