网站前台有时候遇到的麻烦很奇怪,前段时间,我遇到了一个问题:chrome下读取中文标点符号时版块错位,而其他浏览器正常。
这是因为各个浏览器对中文标点符号折行的处理有差异。
问题描述
制作中文页面并使用标点符号时,不同浏览器对于中文标点的折行判定条件有差异。
造成的影响
由于不同浏览器对于中文标点的折行条件有差异,若在对段落文字进行排版布局时,过分依赖当前段落文字自动计算的尺寸可能会产生折行差异,最终可能导致文字布局存在少许差异。
问题分析
1. 中文标点书写规范标点符号是辅助文字记录语言的符号,是书面语的有机组成部分,用来表示停顿、语气以及词语的性质和作用。
中文标点分为 "点号" 与 "标号" 两大类:点号的作用在于点断,主要表示说话时的停顿和语气。点号又分为句末点号和句内点号。
句 末点号用在句末,有句号【。】、问号【?】、叹号【!】3种,表示句末的停顿,同时表示句子的语气。句内点号用在句内,有逗号【,】、顿号【、】、分号 【;】、冒号【:】4种,表示句内的各种不同性质的停顿;标号的作用在于标明,主要标明语句的性质和作用。常用的标号有9种,即:引号【 "XX" ‘XX’】、括号【(XX)】、破折号【——】、省略号【……】、着重号、连接号、间隔号、书名号和专名号。中文标点书写时在行内的位置句号、问号、叹 号、逗号、顿号、分号和冒号一般占一个字的位置,不出现在一行之首;引号、括号、书名号的前一半不出现在一行之末,后一半不出现在一行之首;破折号和省略 号都占两个字的位置,中间不能断开。连接号和间隔号一般占一个字的位置。这四种符号上下居中;着重号、专名号和浪线式书名号标在字的下边,可以随字移行。
2. 各浏览器对中文标点自动折行的规则差异, 分析如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>中文标点_唯众网络</title> </head> <body> <style> .c { float:left; } .d { width:24px; background:#DDD; font:12px 宋体; float:left; margin:5px 10px 0 0; display:inline; } </style> <h1>标号:</h1> <div style="width:640px; overflow:hidden;"> <div class="c"> <div class="d">你。你好</div> <div class="d">你好。你</div> </div> <div class="c"> <div class="d">你?你好</div> <div class="d">你好?你</div> </div> <div class="c"> <div class="d">你!你好</div> <div class="d">你好!你</div> </div> <div class="c"> <div class="d">你,你好</div> <div class="d">你好,你</div> </div> <div class="c"> <div class="d">你、你好</div> <div class="d">你好、你</div> </div>