仓酷云

标题: 来一发在IE6,IE7下变通完成pre-wrap [打印本页]

作者: 变相怪杰 时间: 2015-1-15 23:27
标题: 来一发在IE6,IE7下变通完成pre-wrap
对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介：IE6,7下完成white-space:pre-wrap;
HTML的空缺符处置划定规矩
HTML中的“空缺符”包含空格(space)、制表符(tab)、换行符(CR/LF)三种。
我们晓得，在默许情形下，HTML源码中的空缺符均被显现为空格，而且一连的多个空缺符会被视为一个，大概说，一连的多个空缺符会被兼并。
但是在有些时分，我们但愿HTML源码中的多个一连空格在网页扫瞄器中能够实在地出现，大概必要源码中的换行符能起到真实的换行感化。因而，我们发明了<pre>标签，它能够实在复原它外部文本的空缺符的实在情形。
因而我们常常会把一段暗示盘算机代码的文本放进<pre>标签中，它们在扫瞄器中会体现出本身的空格缩进和换行效果，而不必要我们增添分外的款式和标签来把持它的缩进和换行。
跟着对CSS的懂得不休深切，我们发明，本来这统统都是white-space属性在布置。<pre>元素之以是云云奇妙，是由于它本身具有{white-space:pre;}这一默许款式。
white-space属性
CSS中的white-space属性用于设置文本空缺符的处置划定规矩，这个中包含：是不是兼并空缺符、是不是保存换行符、是不是同意主动换行。各属性值的分歧举动以下表所示：

white-space属性值一览表

属性值空缺符换行符主动换行最早呈现于normal兼并疏忽同意CSS1nowrap兼并疏忽不同意CSS1pre保存保存不同意CSS1pre-wrap保存保存同意CSS2.1pre-line兼并保存同意CSS2.1

（注：在CSS1/2下，white-space属性只可使用于块级元素；在CSS2.1下，可使用于一切元素。）
假如我们必要某个容器元素具有相似<pre>元素的空缺符处置举动，则为它设置{white-space:pre;}款式便可。
对pre-wrap的需求
我们先注释一下上述表格中的“主动换行”举动，它是指某元素外部的文本流依照文本偏向排版，当文本流碰到限定其持续延长的界限时，是不是换行。“不同意主动换行”则意味着文本流会溢出该元素。
因而，{white-space:pre;}款式偶然候其实不能满意我们的希冀。好比，在某些不必要出格松散的场所，大概排版某些对调行不敏感的代码片段（好比HTML或CSS）的时分，我们不但愿代码片断中的一行长代码令它的容器元素发生程度转动条，由于那样方便浏览。我们但愿在这类情形下，长代码主动换行就好。
这时候，对比一下上表中各属性值的分歧举动特性，我们会发明pre-wrap这个属性值锋芒毕露——它恰是我们所必要的。

网页制造poluoluo文章简介：IE6,7下完成white-space:pre-wrap;

对pre-wrap的另外一种需求
再来看另外一种实战中大概会碰到的情况。
表单中的文本域（<textarea>元素）能够承受包括换行符的文本数据，这是它有别于文本框（text范例的<input>元素）的主要特性之一，以是我们一般也称它为“多行文本框”。
随之而来的一个成绩就是，我们经由过程多行文本框提交多行文本数据，是为了在网页上终极显现出多行文本。但因为扫瞄器对HTML源代码默许举行空缺切合并处置，为了确保我们提交的多行文本数据终极在网页上准确地出现出多行的形状，一般必要在服务器端做处置，好比将文本中的换行符转换为HTML的换行标签<br>，再写进数据库；大概从数据库中读出文本数据时举行相似的转换操纵。
如许当服务器向网页输入这些文本数据时，原始的回车形态才干失掉再现。
可是，因为计划掉误（或体系成心限定），服务器端大概就不会做如许的处置。从而招致这些文本信息中的换行符没法出现出换行效果，取而代之的是一个小空格。
（下图为cnBeta网站对批评文本的两种分歧处置体例：左边为一般批评，大概为了限定各条批评的高度、避免歹意刷屏，体系未做换行符转换处置；右边为抢手批评，体系举行了处置。）

假如服务器端由于忽略没有做换行符转换处置，那末在前端是不是能够用最小的价值来弥补？这时候，pre-wrap就能够发扬感化——无需做任何的分外处置，间接为文本的容器元素设置{white-space:pre-wrap;}款式，就能够复原多行文本的实在形态。
杯具的IE6和IE7
再来看一下下面的表格，我们发明pre-wrap是从CSS2.1才入手下手引进的属性值。但是，今朝网平易近利用最为普遍的IE6和IE7扫瞄器都是基于CSS1和部分CSS2的，它们完整不克不及辨认pre-wrap，固然也没法完成pre-wrap的空缺符处置举动。
在猖狂地问候了微软、IE及其相干人等以后，网页开辟者们仍是不能不面临这个成绩——怎样在IE6,7下完成pre-wrap的效果？

网页制造poluoluo文章简介：IE6,7下完成white-space:pre-wrap;

在IE6,7下变通完成pre-wrap
常常重复测试，我们找到了在IE6,7下变通完成pre-wrap效果的办法。
好比，有以下HTML布局：
<divclass="content">这是一段多行文本数据个中某些文本行会十分长从而溢出容器好比你如今看到的这行行与行之间有换行符但没有利用HTML换行标签</div>
我们必要将.content元素设置为pre-wrap款式，幻想情形下只必要编写以下CSS代码就能够了。、
.content{
white-space:pre-wrap;
}
但为了对付IE6,7，我们必要将上述CSS代码修正以下：
.content{
white-space:pre-wrap;
*white-space:pre;
*word-wrap:break-word;
}
如许就能够了，我们在各扫瞄器中实测一下，能够发明我们必要的效果完善完成。
固然，你大概注重到了，我们利用了一点儿CSShack。别忧虑，它们层次明晰而且简单保护，我以为这能够承受。在面临低能扫瞄器的时分，我们只能赐与它们一些分外照顾。
道理
假如你是一个有用主义者，那末文章到这里已停止了。你能够把代码存下然后走人，大概持续扫瞄CSS邪术的别的文章。假如你是一个充斥猎奇心的CSS进修者，那末我很愿意与你一同来剖析一下它的完成道理。
在下面的终极版CSS代码中，很明显关于尺度扫瞄器，我们是用一般的{white-space:pre-wrap;}来完成所需效果的。而关于IE6,7，我们利用了CSShack，让它承受分外的款式声明，利用别的办法来完成相似pre-wrap的效果。
起首，在IE6,7下，{white-space:pre-wrap;}这条款式声明因为不克不及辨认而被抛弃，因而我们为.content别的设置了{white-space:pre;}的款式。我们已很熟习pre了，它的特征与我们想要的pre-wrap效果只要一点区分，即pre不同意主动换行，也就是说，较长的文本行大概会溢出其容器元素。
因而，接上去，为了让这些较长的文本行主动换行，我们为.content元素设置{word-wrap:break-word;}款式（审慎起见，我们用CSShack将这条声明断绝给IE6,7；不外即便将它表露给一切扫瞄器，它也是有害的）。这条声明卖力对.content元素内的文本行举行束缚，并强迫其换行。也就是说，{white-space:pre;}完成了辨认文本换行符的义务，剩下的主动换行的义务交由{word-wrap:break-word;}来完成。

回到后面的道理剖析，实在我们会发明一个冲突，{white-space:pre;}很倔强地不肯换行，而{word-wrap:break-word;}则请求外部文本主动换行。面临如许的抵触，扫瞄器怎样定夺？
在CSS中，把持文本换行体例的属性有良多，当产生抵触的时分，某些属性在文本排版中的优先级更高，因此会在抵触中胜出，决意终极的文本款式。很明显，在下面的这起抵触中，{word-wrap:break-word;}加倍强势，倔强的文本行终极仍是乖乖地换行了。
结语
感激你看到了这里，但愿这篇文章对你有所匡助！

插播word-wrap的相干材料
CSS开展至今履历了多个版本，但它对文本排版的把持仍旧不敷准确和天真。因而微软的IE扫瞄器开辟了一些公有属性，扩大了CSS的文本排版功效，特别宝贵的是，这些扩大属性年夜多思索到了非拉丁语系言语的排版划定规矩。因为这些公有扩大属性的确很有代价，它们被收拾并收录到了CSS3草案中。
word-wrap属性就是个中很有代表性的例子。它决意了文本行凌驾容器的界限时是不是断开转行。今朝这一属性已失掉了尽年夜多半支流扫瞄器的撑持。
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

作者: 小妖女 时间: 2015-1-16 17:54
标题: 来一发在IE6,IE7下变通完成pre-wrap
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 小魔女 时间: 2015-1-27 19:40
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 兰色精灵 时间: 2015-2-5 15:04
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 不帅 时间: 2015-2-12 11:27
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 灵魂腐蚀 时间: 2015-3-3 03:24
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 简单生活 时间: 2015-3-11 09:43
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 金色的骷髅 时间: 2015-3-18 10:47
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 透明 时间: 2015-3-25 22:13
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

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