ie | 易学教程

WEB前端浏览器兼容性问题(PC端及移动端)

阅读更多关于 WEB前端浏览器兼容性问题(PC端及移动端)

WEB前端浏览器兼容性问题(pc端及移动端) PC端（一）html部分 1.H5新标签在IE9以下的浏览器识别 < ! -- [ if lt IE 9 ] > < script type = "text/javascript" src = "js/html5shiv.js" > < /script > < ! [ endif ] -- > html5shiv.js下载地址 https://github.com/aFarkas/html5shiv/releases 2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0 （二）CSS样式的兼容性 1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： < ! -- [ if IE 6 ] > 此处内容只有IE6.0可见 < ! [ endif ] -- > < ! -- [ if IE 7 ] > 此处内容只有IE7.0可见 < ! [ endif ] -- > 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍解决办法：display:block ; 3.IE6下图片的下方有空隙解决方法：给img设置display:block ; 4

HTML5中几种meta标签的含义及使用（含移动端）

阅读更多关于 HTML5中几种meta标签的含义及使用（含移动端）

1、<meta name="renderer" content="webkit"> 这是指定双核浏览器，默认以何种方式渲染页面。 <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式而 webkit|ie-comp|ie-stand 这种写法，跟font-family的规则类似，按照顺序排他的优先级，不支持则往下，浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:360 2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 这是一个文档兼容模式的定义。 Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 使用以下代码强制 IE 使用 Chrome Frame

2017最新前端面试题

阅读更多关于 2017最新前端面试题

HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素：鲜为人知的是： CSS的盒子模型？（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE

浏览器兼容性问题：页面错乱兼容模式和急速模式

阅读更多关于浏览器兼容性问题：页面错乱兼容模式和急速模式

在做web工程时总是出现兼容模式css样式就没有了，整个页面就错乱了的现象。看了这篇文章会对浏览器的模式有一些了解http://old.ui3g.com/artdetail.aspx?id=153 IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式： <metahttp-equiv="X-UA-Compatible"content="IE=8"> <metahttp-equiv="X-UA-Compatible"content="IE=7"> 还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致 CSS3 失效。看来，需要针对 IE8、IE9 分别禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是IE8就输出content="IE=8"，如果是IE9就输出content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下： <metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE"> 经测试后完美解决了兼容模式问题

IE中表格colspan属性影响表格宽度问题

阅读更多关于 IE中表格colspan属性影响表格宽度问题

在用IE浏览器制作预览网页的时候，如果表格使用了colspan属性（列数不同，有合并的列），表格的自动宽度会受到很大的影响，以至于错位混乱。如下图：页面HTML如下： <table class="formitem" width="100%"> <caption style="width: 99%;"> 活动详细信息 </caption> <tr> <th style="width: 17%"> 组织单位: </th> <td style="width: 33%"> 省地质局团委 </td> <th style="width: 17%"> 活动类型: </th> <td style="width: 33%"> 评先评优 </td> </tr>  </table> 这个表格在不同浏览器中的表现如上图所示，在IE中，它的列宽度会出现问题，在IE中它的列宽会错开，而其它浏览器都没有问题。解决这个BUG的原理我们就不必知道了，方法倒是很简单，只要在table的“table-layout”特性值为fixed，使用固定布局的表格元素可避免此问题。修改后的HTML代码如下： <table class="formitem" width="100%" style="table-layout: fixed;">  </table> 显示效果图如下：

JSP页面与html页面在ie下显示的样式不一致的问题

阅读更多关于 JSP页面与html页面在ie下显示的样式不一致的问题

今天前端将样式与html给我文件我转化为jsp之后在我的电脑上使用IE11的IE9和其他浏览器都没有问题，但是在发给其他人检查的时候却发现在win7电脑的IE9上出现样式错乱的问题，前端调试无果的情况下，在网上找到了解决方案解决方案我们应该把 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 也一起复制到jsp里面，用这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 替换掉jsp里面默认生成的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 。替换之后发现问题解决了，坑爹啊坑爹啊参考关于html转为jsp后部分样式在ie浏览器中不兼容的问题来源： CSDN 作者：微瞰技术链接： https://blog.csdn.net/u011342403/article/details/81582629

<编写高质量代码--web前端开发修炼之道>之css总结

阅读更多关于之css总结

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析在标准模式下,页面的宽度为:width+border+padding 在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常表现 width:200px;margin-left:auto;margin-right:auto; 在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式 (二)关于*{margin:0;padding:0} 在不同浏览器中,一些默认样式也会有所不同,例如:ul默认带有缩进的样式,在IE中,其缩进是按照margin实现的,但是在firefox中,其缩进是按照padding实现的为了去掉浏览器的默认样式,一些人会设置*{margin:0;padding:0},但是这并不是最好的写法,一般推荐如下写法: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0} (三)解决一些hack (1)设置浮动时出现的bug:一旦为某个元素设置了浮动,然后有设置了margin属性,如下: .fl{float;left;

navigator.userAgent.indexOf来判断浏览器类型

阅读更多关于 navigator.userAgent.indexOf来判断浏览器类型

设置双核浏览器的浏览模式<meta name=“renderer” content=“webkit|

阅读更多关于设置双核浏览器的浏览模式

今天上知乎看到有人在上邀请我回答这样一个问题：如果访问的页面中有 CSS3 代码，双核浏览器会自动切换到 Webkit 内核吗？ http://www.zhihu.com/question/20094625 我的第一反应是：不会。目前我知道IE可以设置浏览模式： <br /> <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> <br /> <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> <meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7″ /> <meta http-equiv = “X-UA-Compatible” content = “IE=8″ /> 但是这个问题虽然问的有点“痴心妄想”的感觉，可是这是我们多少前端开发工程师所希望的呢？肯定不占少数。于是报着“痴心妄想”的想法在Google上搜索了一下，有新发现哦！ 360安全浏览器6.5版本开始在<head>中添加一行代码： <br /> <meta name=”renderer” content=”webkit|ie-comp|ie-stand”> < meta name = “renderer” content =

CSS3 Box-sizing的理解

阅读更多关于 CSS3 Box-sizing的理解

box-sizing 是 CSS3 的box属性之一。一说到CSS的盒模型（ Box model ）我想很多人都会比较烦，特别是对于新手，然而这个 Box model 又是我们CSS运用中比较重要的一个属性。那么 CSS3 的 Box-sizing 跟盒模型有什么关系呢？第一句话就说了，Box-sizing是 CSS3 的Box属性之一，那他当然也遵循CSS的 Box model 原理，为了能更好的学习和理解这个 Box-sizing 属性，我们有必要先了解一下CSS中 Box model 的原理。 CSS中B ox model 是分为两种，第一种是 W3C 的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；他们不同之处呢？两者的计算方法不一至： 1、W3C的标准Box Model: /盒尺寸计算（元素空间尺寸） Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /盒尺寸计算（元素大小） Element Height = content height + padding +

订阅 ie