Posts Tagged"CSS"

20081016

IE中多行inline链接的背景图片消失之bug

Author:  WinkCategories:  XHTML/CSSNo Comments »

这个问题也是在制作LSDN的新Theme时发现的。本来我的设想是,针对于文章内的a标签,如果是引用外部链接,则为该链接前加上背景图片以作图示;对于下载地址也是如此。

具体到代码,分别是:

<a href="#" class="download">Floppy Configuration Utility - Intel Matrix Storage Manager</a>
a.download:link, a.download:visited, a.download:hover, a.download:active {
  padding-left: 18px;
  background: url(icn_download.gif) 3px 4px no-repeat;
}

Read the rest of this entry

20080811

IE6中区块height无法设置为小于15px的bug

Author:  WinkCategories:  XHTML/CSSComments Off
Tags:  , ,

最近在制作一个项目的过程中,无意碰到了一个IE6专属bug,说是IE6专属,仅指IE7下不可见而已,不包括Mac OS上的IE。

该bug的表现为:在一个display属性为block的容器中,无法设置该容器的height15px以下,设置height值小于15px的效果是无法实现的。但是在IE7中没有这种bug。具体到我所应用的情况,本来我打算做一个空容器,设置其背景为高度10px的一张图片,以用来和其他区块组合为一张完整的图片,但是发现在IE6下,两个区块的结合处总是留有空白,在FireFox和IE7下正常。

Read the rest of this entry

20080511

译文:重新挖掘button元素的作用

Author:  WinkCategories:  XHTML/CSSComments Off

在制作带有图片的按钮时,经常会为如何更有效地组织CSS以灵活应对各种不同按钮而发愁,以前我的做法通常是为input写专门的class,往往会造成很大的代码量,而这篇文章正好给了我很好的启发。仓促翻译,水平有限,见谅。

为用户提供风格统一的界面对于每一位程序设计者来说都是亘古不变的追求。不过在Web设计中却这种统一却尤为困难,这是因为在不同浏览器和操作系统上,视觉渲染有着极大的差别。这种差异在处理表单元素时最为明显,其中又以submit按钮实现视觉统一最为困难。

Read the rest of this entry

20080426

译文:为元素使用多重CSS Class

Author:  WinkCategories:  XHTML/CSSComments Off

以前在编码中,我一般都为标签使用单一的class,最近在项目中,发现一个标签多重class的十分方便,很多时候可以避免class过多和代码重复。翻译拙劣,只是为了给自己留为参考。以下是正文。

CSS一个比较少为人知的窍门是,为元素赋予的class不仅限于一个。当需要为某元素赋予多个class时,只需在属性中将这些class以空格分隔。例如:

<p class="pullquote btmmargin left">...</p>

Read the rest of this entry

20070108

min-height Hack for Internet Explorer 6

Author:  WinkCategories:  XHTML/CSSNo Comments »
Tags:  , , ,

min-height属性可以得到FireFox及Opera的良好支持,但是IE还无法正确识别。当然,这是指IE6/Win。

/* for understanding browsers */
.wrapper {
width: 10em;
padding: 0.5em;
border: 1px solid #000;
min-height: 3em;
height: auto;
}
/* for Internet Explorer */
/*\*/
* html .wrapper {
height: 3em;
}
/**/
20060824

alt属性和title属性

Author:  WinkCategories:  XHTML/CSSNo Comments »

当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。

替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

Read the rest of this entry

20060717

IE弹出窗口或框架结构XHTML中多余的横向滚动条BUG

Author:  WinkCategories:  XHTML/CSSNo Comments »

此译文为急于解决问题时仓促之作,疏忽及翻译简陋之处尚请见谅。关于IE该bug的讨论请见“关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG”

Windows平台的Internet Explorer 6.0以及Mac平台的Internet Explorer 5.0存在一个bug,即框架或者弹出窗口中的页面即使在没有必要的情况下也会出现水平滚动条。出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。

这里给出一些解决方案。

Read the rest of this entry

20060711

关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG

Author:  WinkCategories:  XHTML/CSSNo Comments »

近期在给公司制作基金项目的页面时,使用了XHTML 1.0的框架结构。起初没有发觉什么,因为在制作之时,使用Opera的时间最多。但是在临近交工时,发现很多页面在IE下经常会莫明其妙的横向滚动条,在Opera或FireFox下却十分正常。检查了CSS和页面却没有发现什么错误,这让人十分恼火和郁闷。在多次尝试之后,终于发现了原因:只有在页面较长需要出现垂直滚动条的时候才会出现这个问题,IE对于出现的垂直滚动条,采取的措施是直接塞到页面中,而原有页面原封不动,这样就造成了横向页面变宽了,横向滚动条也便随之出现。反观Opera和FireFox,它们十分聪明地将原有页面按照减去了垂直滚动条占据的宽度之后按照比例缩短,避免了这个问题。

在又一次咒骂IE的同时,必须要做的还是无奈地寻找规避这个bug的方法。国内关于这个bug的内容很少。但是在国外,让人感到IE再次让许多人和我一样地郁闷。一共有两篇文章比较不错,翻译一下,供自己以后参考.一篇为“IE弹出窗口或框架结构XHTML中多余的横向滚动条BUG”,另一篇为“IE displays unnecessary horizontal scroll bar in frameset”

Read the rest of this entry

20060627

CSS实现按钮效果时的IE6/Win之空白Bug

Author:  WinkCategories:  XHTML/CSSNo Comments »
Tags:  , , ,

今天晚上给公司赶工写基金项目的Web页面。业务人员找了一套用ASP.NET实现的架构的CRM,套用了很多Windows控件,这样在IE下面基本实现了C/S的UI效果(当然FireFox和Opera肯定是不被支持了)。他们觉得这个风格不错,我便照葫芦画瓢。

时间越急,便越经常碰上麻烦!做menu页的时候,我用h1实现一级菜单,下拉二级菜单使用无序列表,并且通过指定锚a的伪类为block来实现按钮效果。这时候问题出现了,在FireFox和Opera里看起来好好的,但是IE不知道犯什么毛病,每个二级菜单项目下面总是多一个空行。XHTML文件看来看去都是一点问题没有,这种实现的CSS我也写过不少次了,可是这一次不知道为什么IE就是这么不合作。

Read the rest of this entry

20060403

译文:CSS阴影效果II:模糊阴影

Author:  WinkCategories:  XHTML/CSSNo Comments »
Tags:  , , , ,
  • 作者:Sergio Villarreal@A List Apart
  • 原载:A List Apart
  • 翻译:Breeze

我们喜欢阴影。我们乐于给他们制造阴影并且我们爱好CSS和网页标准,于是我们写下了CSS阴影效果这篇文章。来自头脑中的一个微弱的声音满意于它,我想那就是它结束的原因。我们错了。Internet已经成为了一种媒介,在发表那篇文章后的数分钟后,我们开始收到改进这种方法的注解、质疑和提议。最值得注意的是Phil Baines的方法,能够处理段落的阴影而又使标记不失简易。太感谢他了。对这种投影技巧的抱怨大部分来自于一个问题,上边缘和左边缘的阴影太明显啦,虽然通常能够接受,但是这的确不像是一个图像编辑软件所生成的(模糊阴影)。给定的投影图像是能够有效的省略那一部分点的,我们感到不可避免的麻烦,主要原因应归结于IE浏览器处理PNG格式图片透明度上的天生无能。

Read the rest of this entry

Back to Page Top