一起CSS

当前位置:一起CSS

我看超过部分自动隐藏或显示省略号

日期:2009-01-13 分类:CSS

文章列表或类似文章列表的区域,如果宽度不是很长,为了防止标题字数过多而换行或撑破容器,使布局错位,我们一般会让超过部分自动隐藏或显示成省略号。用程序很容易控制,但不利于 SEO ,所以很多人选择了 CSS 。但用 CSS 就没有问题了吗?我看未必。由于各个浏览器对 CSS 的支持不一样,所以出现了很多不兼容的情况,在这个问题上也一样。那到底会出现什么问题呢?

1、设置的是自动隐藏

自动隐藏,那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题,那么后面的字就会被“剪掉”,只显示半部分。也许你会说:那就设一个正好的宽度。但是你有没有想过:如果标题中有标点符号、英文字母或数字呢?标点符号还好解决,中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了,英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。

2、设置的是显示省略号

设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容,不兼容的浏览器仍然可能出现换行或撑破容器的情况。

3、自动隐藏于显示省略号一起用

一般情况下都是自动隐藏于显示省略号一起用,但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。

下面看一个例子,请点击这里,这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果:

从效果图可以看到:能显示省略号的浏览器效果还不错,但不能显示省略号的浏览就出现了文字被“剪掉”的情况,而且“剪”的部分都不一样。

另:如果加上 -o-text-overflow:ellipsis ,Opera 也可以显示省略号。

虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号,但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以,由于目前种种情况,我认为用 CSS 并不合适。

查看:1,344 评论:4

IE 8 beta 2不识滤镜alpha ?

日期:2009-01-4 分类:CSS

前几天《CSS制作仿image menu效果》的第二个有提示的例子(点击这里查看),为了防止图片与文字颜色一样是,文字难以看清,所以使用了滤镜和属性 opacity 制作了半透明效果,然而用 IE 8 beta 2 浏览时却没有效果,如下图:

我又用 IE 8 beta 2 查看以前《制作半透明效果》的例子,也是没有效果。其他浏览器都没有问题,为何 IE 8 beta 2 却没有效果?难道 IE 8 beta 2 连自家的滤镜都不认识?但是我曾经看过一个也使用了 alpha 滤镜例子,在 IE 8 beta 2 里有效果。难道是我的例子不兼容 IE 8 beta 2 ?于是我试图修改代码,然而无论我增加或删除某些属性,始终没有效果。最后来了个狠的——把 DOCTYPE (最顶上的那行)声明删掉,终于,IE 8 beta 2 里有效果了。

效果是有了,但 DOCTYPE 声明是不能删的啊。删了的话,兼容就是个问题了,最起码盒子模型的解释都不一样(详情请查看《用标准W3C盒子模型》)。就为了 IE 8 beta 2 ,而使例子在 IE 系列浏览器中都错位,不值得。当然可以用 CSS hack ,但是不推荐。更好的解决办法我认为是:1)使用 jQuery ;2)把提示文字定位到其他地方。

才用 IE 8 beta 2 没多久,就发现几个问题,看来 IE 8 beta 2 真是不怎么样,希望正式版会更好。

查看:1,221 评论:8 标签:

CSS制作仿image menu效果

日期:2008-12-31 分类:CSS

image meun 是一种很不错的效果,让菜单以图片的形式呈现,给网页增色不少。这种效果一般由 js 制作,今天我们用 CSS 来制作类似的效果,先看下效果图:

image menu

基本思路

其实很简单。把 img 标签放到 a 标签里面,给 a 标签设置一个较小的宽度,并且设置超过部分隐藏。当鼠标经过 a 标签时,把 a 标签的宽度改变为与图片大小相同。

代码实现

XHTML 代码:

<ul>
	<li><a href="#"><img src="images/sky.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/flow.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/tree.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/bord.jpg" alt="" /></a></li>
</ul>

CSS 代码:

* {
	margin:0;
	padding:0;
}
img {
	width:240px;
	height:300px;
	border:none;
	display:block;
}
ul {
	width:384px;
	margin:20px auto;
	list-style:none;
	background:#e6e6e6;
	border:7px solid #e6e6e6;
	overflow:hidden;
}
li {
	float:left;
}
a {
	position:relative;
	display:block;
	width:48px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	cursor: default;
}
a:hover {
	width:240px;
}
a:hover {
	background:no-repeat;
}

查看Demo

当然,和 js 制作的相比,还是差点,比如 js 制作的有动画缓冲效果,用户体验好些。

再看一个有提示的例子,查看Demo

查看:1,563 评论:7 标签:

别说IE6不认识!important

日期:2008-12-27 分类:CSS

别说IE6不认识 !important ,它们只是不够默契。

IE6 对 !important 的支持存在 bug ,有很多人因此作为 IE6 的 hack 。用多了,传多了,很多人就说 IE6 不支持 !important ,给新人带来一些影响。

在《IE6下!important的bug》中已经说了这个问题,现在再举几个例子说明这个问题,以下面的 XHTML 代码为例:

<ul id="list">
<li class="first">这里是第一行文字</li>
<li>那这里就是第二行文字咯</li>
<li>这里应该是第三行里吧</li>
<li>这里绝对是第四行了</li>
</ul>

第一个例子的 CSS 代码:

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
#list li{
color:blue;
}
.first{
color:red !important;
}

点击这里查看效果

在 IE6 里,第一行文字为红色,!important 起作用了。如果 .first 不加 !important ,那么在所有浏览器中第一行都显示蓝色,因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好,但为了举例子,所以不这样写。

第二个例子的 CSS 代码:

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
}
.first{
color:blue;
}

点击这里查看效果

同样,!important 在 IE6 里起效果了。

再看第三个例子的 CSS 代码:

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
color:blue;
}

点击这里查看效果

这次 !important 在 IE6 里就不起效果了。

综合上面三个例子得出这么一个结论:在同一个选择器内有重复的属性的话,此选择器内的此属性的 !important 在 IE6 里无效。

所以,并不能说 IE6 不支持 !important ,只是支持的不够好。

查看:1,362 评论:5 标签:,

CSS3圆角属性和浏览器私有圆角属性

日期:2008-12-20 分类:CSS

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。

对于一些浏览器,它们有其私有的圆角属性。如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius 。效果见下图:

FF 的圆角

ff圆角

Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核,这里就只附 Chrome 的效果了)

chrame圆角

IE 和 Opera 就没有私有的圆角属性了,如果有的话,那制作圆角应该就简单多了,把各自的私有属性全部写上,让各个浏览器“对号入座”,就达到了“兼容”的效果。

查看:887 评论:6 标签:,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved