仓酷云

标题: CSS教程之Firefox Bug: inline/inline-block的间隙 [打印本页]

作者: 小妖女 时间: 2015-1-15 23:33
标题: CSS教程之Firefox Bug: inline/inline-block的间隙
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
网页制造Poluoluo文章简介：FirefoxBug:inline/inline-block的间隙.
起首要申明的是，这个题目有点题目党的意义，这个bug也存在于IE8下，在IE6和IE7下一般。之前写过两篇关于IEbug的文章，这里特地用了Firefoxbug作为题目，是为了给本人找点内心慰藉，免得老是抱怨IE:)。
关于inline-block，能够参考之前的一篇文章跨扫瞄器的inline-block：
啊，inline-block，挺难揣摩而且诱人的声明上答应了良多，实在供应了很少。良多次我拿到相似如许的PSD文件：

就哭了。
一样平常说来，这类范例的结构是小菜一桩。流动宽度，流动高度，向左浮动就办理了。可是，这个计划中内容的几是可变的，这就意味着假如这些块中的一些内容比其他的多，就会损坏这个结构。

由于第一个展现项比其他项高，第五个项目就绝对第一个浮动，而不是位于它上面了。基础上我们想要一个弹性表格的结构，可是得当的，语义标志。
我们以一个无序列表入手下手这个复杂的页面，并把display设置为inline-block:

<ul><li><h4>Thisisawesome</h4></div></li>

复制代码

貌似<li>中的内容被’重置’而且准确显现了。
2009.04.29更新：经由多方查证，嵌套div的办法能够注释为：FF关于一切的属性为stack(固然坚持-moz-inline-stack)的元素，它的第一级子元素会承继该元素的宽度和高度，可是子元素的子元素就不会再承继其宽和高了。不外，实在，FF2在某种水平上能够忽视了……——by神飞

如今，转到IE7下去。IE7也不撑持inline-block，可是我们能够棍骗它以使<li>仿佛是inline-block的。怎样做呢？hasLayout，IE的一个带来兴趣的奇妙属性。你没法在一个元素上用hasLayout:true;显现地设置hasLayout，或经由过程其他相似的复杂办法，可是能够用其他相似zoom:1的声明来引发它。
手艺下去说，hasLayout意味着，一个hasLayout设为true的元素卖力衬着它本人及其子元素(把它和min-height和width团结起来，就失掉了和display:block十分类似的效果)。这有点像奇妙的精灵粉，把它洒在衬着成绩上，成绩就消散了。
当我们给<li>加上zoom:1和*display:inline(用于IE6和IE7的星号hack)以后，在IE7中它们就能够像inline-block一样显现了：

li{width:200px;min-height:250px;border:1pxsolid#000;display:-moz-inline-stack;display:inline-block;vertical-align:top;margin:5px;zoom:1;*display:inline;}

复制代码

哇！差未几了，只剩IE6了：

IE6不撑持min-height，可是多亏它对height属性的不准确处置，我们能够用它来取代。把_height(IE6下划线hack)设为250px使一切的<li>元素高度为250px，而且假如它们的内容年夜于250px，他们会扩展来顺应。其他一切的扫瞄器会疏忽_height。
如今为止，对一切的扫瞄器都无效了，这是终极的CSS和HTML：

复制代码

<li><div><h4>Thisisawesome</h4><imgsrc="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"alt="lobster"width="75"height="75"/></div></li>

复制代码

糖伴西红柿说：
这篇文章所讲的也长短常利用的手艺，个中扳连到其他的手艺，也必要人人有所懂得。恰好糖伴西红柿这两天也在看这方面的材料，供应一些材料给人人参考。
这个bug是“痛在远方”同砚碰着的，的确很诡异啊，貌似对尺度撑持越好的扫瞄器才会有这个成绩。
以下图：

在Firefox下，inline/inline-block的元素间接会有莫名的几像素(貌似是6px)的清闲。这个bug对照难发明，由于为了美妙，一样平常的这类计划，inline/inline-block的元素间接城市有必定的间距，再加上今朝的扫瞄器对inline-block这个属性的撑持并非很好，这个属性使用的也不是很频仍。由跨扫瞄器的inline-block来看，要对扫瞄器做很多hack，代码量和便利性上不如间接利用浮动。因而这个bug的影响实在不年夜。
要办理这个bug，貌似今朝没有甚么好的办法，只能改动代码的缩进，把换行往失落，全部代码写进一行。
</p>
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 只想知道 时间: 2015-1-17 23:14
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 蒙在股里 时间: 2015-1-24 12:07
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 海妖 时间: 2015-2-1 11:16
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 乐观 时间: 2015-2-7 06:51
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 愤怒的大鸟 时间: 2015-2-21 06:44
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 柔情似水 时间: 2015-3-6 20:13
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 精灵巫婆 时间: 2015-3-13 09:16
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 谁可相欹 时间: 2015-3-20 19:21
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://ckuyun.com/)