美文网首页
布局及兼容

布局及兼容

作者: 不可不信缘_b32e | 来源:发表于2018-06-30 22:16 被阅读0次

一、div+css布局优点?

1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。
2.布局精准,网站版面布局修改简单。
3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。
4.节约站点所占的空间和站点的流量。
5.提高另外搜索引擎对网页的搜索效率。

二、Table布局的优缺点?

优点

1.容易上手。
2.可以形成复杂的变化,简单快速。
3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容

缺点:

1、Table要比其它html**标记占更多的字节。(延迟下载时间,占用服务器更多的流量资源。)

2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。)

3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)

4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

5、Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)(这会限制你页面设计的自由性。)

6、一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间。)

7、table对对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容。)

8、table代码会让阅读者抓狂。(不但无法利用CSS,而且会你不知所云)

9、table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

三、如何解决IE6的双边距bug?

当满足下面这三个条件时,就会出现这个BUG

1、要为块状元素;
2、要左侧浮动;
3、要有左外边距(margin-left)。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现

解决方法:

给float的元素添加一个display:inline

相关文章

  • 布局及兼容

    一、div+css布局优点? 1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。2...

  • 高效移动web布局

    Flexbox弹性盒子布局 兼容ios可以android4.4以下,兼容旧版flexboxandroid4.4.及...

  • display:flex Flex布局 弹性盒模型

    【弹性盒模型布局不兼容IE-10及以下】 设置为Flex布局后,子元素的 float clear vertic...

  • 六、flex布局

    参考及引用链接 阮一峰Flex 布局教程张鑫旭box-flex(旧版)flex布局浏览器兼容处理 flex前奏知识...

  • flex弹性布局

    flex弹性布局与传统布局的区别 传统布局优点:兼容性好缺点:繁琐 flex弹性布局优点: 简单缺点:兼容性不好 ...

  • css-flex布局

    1.flex布局的兼容性写法 关于flex布局的兼容性,参考flex兼容性 .flex{ display:-web...

  • [HTML5] html5 笔记1

    01-HTML5基础 了解HTML5 新语义标签 网页布局结构标签及兼容处理 多媒体标签及属性介绍 新表单元素及属...

  • Grid网格布局

    grid网格布局 兼容性:ie10及以上浏览器支持; 容器常用属性设置display:grid | inline-...

  • 2018-10-16展现类界面测试

    布局 样式 兼容性测试

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

网友评论

      本文标题:布局及兼容

      本文链接:https://www.haomeiwen.com/subject/tiyxuftx.html