IE6,7下实现white-space:pre-wrap;(2)
作者:birdstudio 来源:CSS魔法 发布时间:2009-12-31 18:30:00
对 pre-wrap 的另一种需求
再来看另一种实战中可能会遇到的情形。
表单中的文本域(<textarea> 元素)可以接受包含换行符的文本数据,这是它有别于文本框(text 类型的 <input> 元素)的重要特征之一,所以我们通常也称它为“多行文本框”。
随之而来的一个问题就是,我们通过多行文本框提交多行文本数据,是为了在网页上最终显示出多行文本。但由于浏览器对 HTML 源代码默认进行空白符合并处理,为了确保我们提交的多行文本数据最终在网页上正确地呈现出多行的形态,通常需要在服务器端做处理,比如将文本中的换行符转换为 HTML 的换行标签 <br>,再写入数据库;或者从数据库中读出文本数据时进行类似的转换操作。
这样当服务器向网页输出这些文本数据时,原始的回车状态才能得到再现。
但是,由于设计失误(或系统有意限制),服务器端可能就不会做这样的处理。从而导致这些文本信息中的换行符无法呈现出换行效果,取而代之的是一个小空格。
(下图为 cnBeta 网站对评论文本的两种不同处理方式:左侧为普通评论,可能为了限制各条评论的高度、防止恶意刷屏,系统未做换行符转换处理;右侧为热门评论,系统进行了处理。)
如果服务器端因为疏忽没有做换行符转换处理,那么在前端是否可以用最小的代价来补救?这时,pre-wrap 就可以发挥作用——无需做任何的额外处理,直接为文本的容器元素设置 {white-space: pre-wrap;} 样式,就可以还原多行文本的真实状态。
杯具的 IE6 和 IE7
再来看一下上面的表格,我们发现 pre-wrap 是从 CSS 2.1 才开始引入的属性值。然而,目前网民使用最为广泛的 IE6 和 IE7 浏览器都是基于 CSS1 和部分 CSS2 的,它们完全不能识别 pre-wrap,当然也无法实现 pre-wrap 的空白符处理行为。
在疯狂地问候了微软、IE 及其相关人等之后,网页开发者们还是不得不面对这个问题——如何在 IE6,7 下实现 pre-wrap 的效果?


猜你喜欢
- 库的管理创建库create database [if not exists] 库名;删除库drop databases [if exists
- 总的来说视觉设计是一个很大的范畴,囊括了我们身边很多产品的再创作设计,比如工业产品设计,广告设计,新媒体设计,服饰设计,还有我们这里要讨论的
- Kettle中使用JavaScript调用jar包对文件内容进行MD5加密.本文主要知识点:JavaScript调用jar包对文件内容进行M
- 微信小程序开发中窗口底部tab栏切换页面很简单很方便.代码:1.app.json//app.json { "pages"
- 图像的二值化或阈值化(Binarization)旨在提取图像中的目标物体,将背景以及噪声区分开来。通常会设定一个阈值T,通过T将图像的像素划
- 今天要做一个量子隧穿的的演示动画,在CSDN上看了很多大佬的文章,然而忙了接近半天才做好这件事。把踩过的坑记一下,同时这段代码也是值得记录的
- mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指cl
- Example.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
- 看过一篇关于下载网页中图片的文章,它只能下载以http头的图片,我做了些改进,可以下载网页中的所有连接资源,并按照网页中的目录结构建立本地目
- 一、正则1.正则表达式定义正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法。或者说:正则就是用来描述一
- LinuxNo.1 IPv4下面是IPv4的IP正则匹配实例:简单的匹配给定的字符串是否是ip地址import reif re.match(
- 如下所示:def findSmallest(arr): smallest = arr[0]#将第一个元素的值作为最小值赋给smallest
- 大部分的pytorch入门教程,都是使用torchvision里面的数据进行训练和测试。如果我们是自己的图片数据,又该怎么做呢?一、我的数据
- 这些标记告诉预处理器,它们包含代码,并且应对它们作出处理。与 CGI 非常相似,这些代码在服务器上运行,并返回一些内容,这些内容表现为发回给
- "^/d+$" //非负整数(正整数 + 0)"^[0-9]*[1-9][0-9]*$" //正整数
- 关于jQuery的链式调用真正有意义的链式调用也就是方法链(method chaining)。方法链这个词是有的,而且使用的很广泛。其实很多
- 写在前面原计划继续写一篇Portia的使用博客,结果在编写代码途中发现,在windows7的DockerToolbox里面使用Portia错
- 一、学习目标:学会利用python的GUI做界面布局手写计算器代码熟悉控件的使用方法优化计算器代码,解决 获取按钮文本 的方法了解lambd
- 本文实例分析了Python中的对象,方法,类,实例,函数用法。分享给大家供大家参考。具体分析如下:Python是一个完全面向对象的语言。不仅
- 计时器和延时器的概念 //--计时器 // 计时器ID号 setInterval(回调函数, 毫秒数); // 每隔指定毫秒数,调用一次回调