HTML – 第 2 页 – Whidy Blog

关于火狐的文字换行问题思考

遇到这个问题,可以说是巧合吧,由于场景可能过于复杂我也不不方便进行大量测试,我做的CMS模板中,正好有一处读取18个字符长度,而这个长度在中英文和特殊字符混排的时候是多变的,所以并不固定,不过一般情况下我会保守留一个比较宽的宽度,让一行内可以不出意外的容纳下任何混排的标题.

先来看看问题图片:

事实上,并不顺利~我将其代码片段弄下来做了个demo,大家测试一下(说明:chrome版本34, firefox版本29,IE6可以尝试测试word-wrap:break-word;同时对其进行hasLayout测试观察变化).

<!DOCTYPE html>
<html>
<head>
	<title>关于FF和CHROME在行内文字换行测试(附IE6测试)</title>
</head>
<style type="text/css">
.width-346px {width: 346px;}
.font-style {font:bold 18px/2 "Microsoft YaHei";/*word-wrap:break-word;overflow:hidden; zoom: 1;*/}
</style>
<body>
<h1>这是关于火狐和谷歌浏览器的区别测试</h1>
<div class="width-346px">
	<a href="#" class="font-style">Intel打响反击战 Computex2014平板综述</a>
	<span class="font-style">Intel打响反击战 Computex2014平板综述</span>
	<p class="font-style">Intel打响反击战 Computex2014平板综述</p>
</div>
</body>
</html>

虽然我写了三行不同标签,相同样式的文字,其实跟标签名没什么关系了,有人可能会怀疑我没有做css reset,这点可以排除我为了减少代码量就没有写,实际上写上CSS RESET一样在火狐下会换行,我尝试使用word-wrap:break-word;等属性也是无效的.因此,这个火狐浏览器对于此处换行的解释我也无从得知,但是可以肯定一点,虽然外层我限制了width-346px,实际上从火狐的开发者工具上来看,内部三行内容的真实宽度也依然是346px,因此并不是内部内容宽度大于父级导致换行!原因不明!

最后,没有办法,只好给父级加宽了1px,火狐就显得正常了…若有人有兴趣看到此问题,望共同讨论研究下ff的兼容性问题.

2014年6月16日15:03:25

在Bob的提醒下,的确是这个问题,加一个white-space:nowrap;即可,不过你属性名敲掉了个字母哦~最后献上解决方案:

<!DOCTYPE html>
<html>
<head>
    <title>关于FF和CHROME在行内文字换行测试(附IE6测试)-解决!</title>
</head>
<style type="text/css">
.width-346px {width: 346px;}
.font-style {font:bold 18px/2 "Microsoft YaHei";white-space:nowrap;}
</style>
<body>
<h1>这是关于火狐和谷歌浏览器的区别测试</h1>
<div class="width-346px">
    <a href="#" class="font-style">Intel打响反击战 Computex2014平板综述</a>
    <span class="font-style">Intel打响反击战 Computex2014平板综述</span>
    <p class="font-style">Intel打响反击战 Computex2014平板综述</p>
</div>
</body>
</html>

以后遇到莫名其妙的换行问题,可要多多注意.参考来自Bob的word-break、word-wrap、word-space、white-space对比图

IE6和IE7在同级相邻元素间边距问题

IE6和IE7一向令网页制作者头痛,虽然有些经验丰富的前端开发人员能快速解决大部分问题,但是有时候,仍然会遇到一些令人疑惑的问题.我在做一个简单效果时,发现有时候及时清浮并不是一件好事,通过触发hasLayout反而出了问题.接下来详细说说这个IE6和IE7的问题.

两个同级的相邻的元素A和B(均为块级元素),当A内部有元素浮动,并且拥有外边距时,B则会贴紧A的最后一个元素,假设B没有清除浮动,则会与A的最后一个元素的左右边距保持边距距离,例如图一:

继续阅读“IE6和IE7在同级相邻元素间边距问题”

子级元素如何覆盖父级元素之边框颜色的遮盖应用

由于昨天重装系统,很多程序还未正确配置好,这篇暂且长话短说,直接上代码.
关于这个需求在网站制作上还是经常遇到的(例如白色边框覆盖其他边框的障眼法),做到全兼容似乎只有这个方法最好,特分享出来.这里坚决不用z-index,更加不用绝对定位!查看DEMO

<!DOCTYPE html>
<html>
<head>
<title>childBox and parentBox overlay relationship</title>
<style type="text/css">
* {margin:0;padding:0;line-height:1.5;font-family:"Microsoft YaHei";}
body {background-color:#eee;}
.container {width:1000px;margin:30px auto;}
.parentBox {width:300px;height:300px;margin:0 auto; border:50px solid #ccc;*overflow:hidden;}
.childBox {width:200px;padding:10px;margin:0 auto;height:250px;border:40px solid #aaa;margin-top:20px;position:relative;}
h3 {font-size:18px;}
p {font-size:14px;margin:10px 0;}
.author {text-align:right;}
</style>
</head>
<body>
 <div class="container">
 <div class="parentBox">
 <div class="childBox">
 <h3>childBox and parentBox</h3>
 <p>The childBox overlay the parentBox, otherwise, it must be compatible widt all IEs</p>
 <p class="author">whidy</p>
 </div>
 </div>
 </div>
</body>
</html>

明天重新整理一下,发一点相关页面应用到这个的地方.

一个小小的双引号引发的思考-XP内IE下的字体(终)

这是我的终极方案了…其实这个最简单IE6,7的中文双引号,蛋疼!这个方案从代码和易于理解的角度来看是最好的,缺点就是要外部引用两个东东,如果网速不好就杯具了.这次也不多少了,用到一个伪类选择器(为了兼容IE6,IE7引入了一个JS文件),用到上次说的外部引用google font.那就直接上代码和DEMO测试页

<!DOCTYPE html>
<html>
<head>
<title>大双引号文字段自适应DEMO</title>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro:700' rel='stylesheet' type='text/css'>
<![endif]-->
<style type="text/css">
.container {width: 720px;color: #000;padding:20px;background-color: #eee; text-align: left;position: absolute;top: 200px;left: 220px;}
.content {margin:40px 0 0 8px;padding-bottom:30px;position: relative;font:bold 24px/40px "Microsoft YaHei";text-indent:0;}
.content:before, .content:after {font:bold 160px/160px Arial;*font-family:"Anonymous Pro"; height:75px;overflow: hidden;}
.content:before {content:"“";position: relative;display:inline;margin: -40px 0 0 0;float: left;*top: -5px;
}
.content:after {content:"”";position:absolute; margin: -12px 0 0 -15px; *margin: -20px 0 0 5px;}
</style>
</head>
<body>
    <div class="container">
		<p class="content">HTC于北京时间23：00在英国伦敦和美国纽约同步举行发布会，正式发布新旗舰智能手机HTC One (M8)，0界面等几大亮点。HTC One (M8)带来突破性的设计与质量，拥有一体成型的高质感金属外型设计，5.0英寸1080p屏幕，极窄边框以及平滑柔和的圆弧曲线，机身更加圆润和轻薄。</p>
    </div>
</body>
</html>

之前的几种方法,参考:
一个小小的双引号引发的思考-XP内IE下的字体(上)
一个小小的双引号引发的思考-XP内IE下的字体(下)

话说这个WORDPRESS更新真是快,才更新到3.8.2,这下又出了3.9- -,好在不用改主题…