Javascript页面宽度高度

关于获取各种浏览器可见窗口大小的一点点研究
<script>
function getInfo()
{
    var s = “”;
    s += ” 网页可见区域宽:”+ document.body.clientWidth;
    s += ” 网页可见区域高:”+ document.body.clientHeight;
    s += ” 网页可见区域宽:”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
    s += ” 网页可见区域高:”+ document.body.offsetHeight + ” (包括边线的宽)”;
    s += ” 网页正文全文宽:”+ document.body.scrollWidth;
    s += ” 网页正文全文高:”+ document.body.scrollHeight;
    s += ” 网页被卷去的高(ff):”+ document.body.scrollTop;
    s += ” 网页被卷去的高(ie):”+ document.documentElement.scrollTop;
    s += ” 网页被卷去的左:”+ document.body.scrollLeft;
    s += ” 网页正文部分上:”+ window.screenTop;
    s += ” 网页正文部分左:”+ window.screenLeft;
    s += ” 屏幕分辨率的高:”+ window.screen.height;
    s += ” 屏幕分辨率的宽:”+ window.screen.width;
    s += ” 屏幕可用工作区高度:”+ window.screen.availHeight;
    s += ” 屏幕可用工作区宽度:”+ window.screen.availWidth;
    s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
    s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
    //alert (s);
}
getInfo();
</script>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

用js控制网页播放器

我整理的一些,不是很全。但应该够用了

media player控制

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 “0:32”
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)

======================================================

REAL PLAYER控制

player.DoPlay() 播放
player.DoPause() 暂停
player.DoStop() 停止
player.GetLength() 返回播放文件的总长度(以毫秒为单位)
player.GetPosition() 返回播放文件的当前时间位置(以毫秒为单位)
player.GetPlayState() 返回播放器状态(0:停止,1:连接,2:缓冲,3:播放,4:暂停,5:寻找)
player.SetPosition(n) 时间位置跳到n的地方(n取值以毫秒为单位)
player.SetVolume(n) 设置音量(n取值为0到100)
player.SetMute(s) 静音(s取值为true和false)
player.SetFullScreen() 全屏
player.setSource() 设置文件来源

 

 

这个可以播放MP3
<HTML>
<HEAD>
  <TITLE>MP3播放器</TITLE>
  <SCRIPT language=javascript event=OpenComplete for=Player>
    Player_OpenComplete()
  </SCRIPT>

  <SCRIPT language=javascript event=PositionChange for=Player>
    Player_PositionChange()
  </SCRIPT>

  <SCRIPT language=javascript event=Timer for=Player>
    Player_Timer()
  </SCRIPT>

  <SCRIPT language=javascript event=StateChange for=Player>
    Player_StateChange()
  </SCRIPT>
</HEAD>

<BODY language=javascript leftMargin=0 topMargin=0 onload=”PlayInit()”>
<br><br><br>
<center>
<table width=”390″ height=”121″ background=”MP3bg.gif” border=0 cellSpacing=0 cellPadding=0 borderColorDark=#FFFFFF borderColorLight=#ff0000>
  <tr>
   <td height=”18″ width=”22″></td>
   <td height=”18″ width=”87″></td>
   <td height=”18″ width=”87″></td>
   <td height=”18″ width=”72″></td>
   <td height=”18″ width=”83″></td>
   <td height=”18″ width=”27″></td>
  </tr>

  <tr>
   <td height=”27″ width=”22″></td>
   <td height=”27″ width=”87″></td>
   <td height=”27″ width=”246″ colspan=”3″><LABEL id=FileNameLabel style=”FONT-SIZE: larger; COLOR: blue”></LABEL></td>
   <td height=”27″ width=”27″></td>
  </tr>

  <tr>
   <td height=”31″ width=”22″></td>
   <td height=”31″ width=”87″></td>
   <td height=”31″ width=”87″ align=center><LABEL id=TimeLabel style=”FONT-SIZE: larger; COLOR: blue”>00:00</LABEL></td>
   <td height=”31″ width=”72″>
    
   </td>
   <td height=”31″ width=”83″ align=”center”><LABEL id=LengthLabel style=”FONT-SIZE: larger; COLOR: blue”>00:00</LABEL></td>
   <td height=”31″ width=”27″></td>
  </tr>
  <tr>
   <td height=”22″ width=”22″></td>
   <td height=”22″ width=”87″></td>
   <td height=”22″ width=”246″ colspan=”3″ align=center><DIV id=Progress style=”LEFT: 115px; WIDTH: 240px;BACKGROUND-COLOR: red”></DIV></td>
   <td height=”22″ width=”27″></td>
  </tr>

  <tr>
   <td colspan=”6″ align=center valign=bottom height=”20″ width=”388″></td>
  </tr>
  <tr>
  <td colspan=”6″ align=center valign=bottom height=”20″ width=”388″>
   <IMG id=OpenBtn onclick=”OpenBtn()” alt=FileOpen  src=”open.gif” width=55><IMG id=PlayBtn onclick=”PlayBtn()” alt=Play    src=”play.gif” width=55><IMG id=StopBtn onclick=”StopBtn()” alt=Stop    src=”stop.gif” width=55><IMG id=PauseBtn onclick=”PauseBtn()” alt=Pause   src=”pause.gif” width=55><IMG id=RewBtn  onclick=”RewBtn()”  alt=Rewind   src=”rew.gif”  width=55><IMG id=FFBtn  onclick=”FFBtn()”  alt=FastFoward src=”FF.gif”  width=55 height=”29″>
  </td>
  </tr>
  <tr>
  <td colspan=”6″ align=center valign=bottom height=”4″ width=”388″></td>
  </tr>
</table>
</center>

  
 
    
<OBJECT id=Player style=”VISIBILITY:hidden;” height=10 width=10 classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A>    
  <PARAM NAME=”Appearance” VALUE=”0″>    
  <PARAM NAME=”AutoStart” VALUE=”0″>    
  <PARAM NAME=”AllowChangeDisplayMode” VALUE=”-1″>    
  <PARAM NAME=”AllowHideDisplay” VALUE=”0″>    
  <PARAM NAME=”AllowHideControls” VALUE=”-1″>    
  <PARAM NAME=”AutoRewind” VALUE=”-1″>    
  <PARAM NAME=”Balance” VALUE=”0″>    
  <PARAM NAME=”CurrentPosition” VALUE=”0″>    
  <PARAM NAME=”DisplayBackColor” VALUE=”0″>    
  <PARAM NAME=”DisplayForeColor” VALUE=”16777215″>    
  <PARAM NAME=”DisplayMode” VALUE=”0″>    
  <PARAM NAME=”Enabled” VALUE=”-1″>    
  <PARAM NAME=”EnableContextMenu” VALUE=”-1″>    
  <PARAM NAME=”EnablePositionControls” VALUE=”-1″>    
  <PARAM NAME=”EnableSelectionControls” VALUE=”0″>    
  <PARAM NAME=”EnableTracker” VALUE=”-1″>    
  <PARAM NAME=”Filename” VALUE=””>    
  <PARAM NAME=”FullScreenMode” VALUE=”0″>    
  <PARAM NAME=”MovieWindowSize” VALUE=”0″>    
  <PARAM NAME=”PlayCount” VALUE=”1″>    
  <PARAM NAME=”Rate” VALUE=”1″>    
  <PARAM NAME=”SelectionStart” VALUE=”-1″>    
  <PARAM NAME=”SelectionEnd” VALUE=”-1″>    
  <PARAM NAME=”ShowControls” VALUE=”-1″>    
  <PARAM NAME=”ShowDisplay” VALUE=”0″>    
  <PARAM NAME=”ShowPositionControls” VALUE=”0″>    
  <PARAM NAME=”ShowTracker” VALUE=”-1″>    
  <PARAM NAME=”Volume” VALUE=”-830″>    
</OBJECT>    
<INPUT type=file id=FileBtn style=”VISIBILITY:hidden;”>       
       

<SCRIPT language=javascript>

var OldPos, Length, Width

function PlayInit()
{
 OldPos = 0    
 Width = Progress.style.posWidth    
 Progress.style.posWidth = 0 
}

function Player_OpenComplete(){Length=Player.Duration;LengthLabel.innerText=FormatTime(Length);}
function Player_Timer()
{
 var CurPos
 CurPos=Math.floor(Player.CurrentPosition)
 alert(CurPos)
 if ( CurPos != OldPos )
 {
  OldPos=CurPos
  TimeLabel.innerText=FormatTime(CurPos)
  Progress.style.posWidth=(Width * CurPos)/Length
 }
}

function Player_PositionChange()
{
 TimeLabel.innerText=FormatTime(Player.CurrentPosition)
 Progress.style.posWidth=(Width * Player.CurrentPosition) / Length
}

function Player_StateChange()    
{    
 if(Player.CurrentState==0){TimeLabel.innerText = FormatTime(0);Progress.style.posWidth=0}
}

function OpenBtn()
{
 var fstr=”
 FileBtn.click()    
 if (FileBtn.value==”) return
 Player.FileName=FileBtn.value
 fstr=FileBtn.value
 var temparr=fstr.split(‘\\’)
 FileNameLabel.innerText= ‘ ‘ + temparr[temparr.length-1]
 Player.Run()
}

function PlayBtn(){Player.Run()}

function StopBtn(){Player.Stop()}

function PauseBtn(){Player.Pause()}

function RewBtn(){Player.CurrentPosition=Player.CurrentPosition-10}

function FFBtn(){Player.CurrentPosition=Player.CurrentPosition+10}

function FormatTime(value)
{
 var min, sec, str
 min=Math.floor(value / 60)
 sec=Math.floor(value % 60)
 if (isNaN(min)){return “00:00”}
 if (min>9){str=min.toString() + “:”}else{str=”0″ + min.toString() + “:”}
 if (sec>9){str=str + sec.toString()}else{str=str + “0” + sec.toString()}
 return str
}

</SCRIPT>

</BODY></HTML>

2007最优秀的CSS网站设计

很多人不知道的是,我同样是 Best Web GalleryN.Design Studio“背后”的人. 2006年,我创建了Best Web Gallery,作为我发现的最好的 CSS and Flash 网站的收藏.我非常高兴这个项目让我有机会是我的设计思想与主流保持一致。在过去的一年里,我看了提交的许多网站, (有些很好,也有些则很糟糕).当2007年即将过去,我想与各位共同分享2007年最好的网站设计,下面是一份从 Best Web Gallery 精选的50个优秀网站列表 — 2007年最优秀的CSS网站设计!

Capture the Valley

非常漂亮的单页网站设计

screenshot

Squawk Design

图形艺术学生Dominik Lenk 的令人印象深刻的设计

screenshot

Holiday To Go

很喜欢红色背景的应用

screenshot

Team Green

如果您喜欢我之前的 艺术设计集 ,你就会喜欢这个网站的。

screenshot

Radiant Plumbing

一个铝业网站怎么可以如此有艺术性?如果文本区域的对照再高一点,它将是一个完美的设计。

screenshot

Alex Buga

喜欢木质的半透明效果。

screenshot

Burnett Dairy

很团结,很亲切

screenshot

Variable

另一个但页面网站。

screenshot

Pixelmator

一个使用了漂亮的图标和布局结构的Mac应用网站

screenshot

Jon Tan

网络印刷和格栅布局的良好应用

screenshot

Scrapblog

一个很好的网络程序的界面。

screenshot

Marius Roosendaal

Marius Roosendaal的单页网站.不要忘了检查“白天”和”黑夜”模板.

screenshot

Trale

我超喜欢Trale花在排版上的细节。

screenshot

Sarah Hyland

非常好的头部设计。

screenshot

Eye Candy

Mmm yummy… both the design and chocolate bars. Another good design site powered by WordPress.

screenshot

RealaSponse

漂亮的两栏主页

screenshot

Flame Digital

无与伦比的布局结构和铺满整个网站的漂亮背景图片.

screenshot

Tickerville

我更喜欢这个网站的设计,但我不知道这样的设计/样式是否适合一个财经相关网站.

screenshot

Webstock

新西兰网络研讨会网站。

screenshot

Cabedge

简洁、干净、舒服的布局。

screenshot

I Love Typography

John 的排版专用博客.

screenshot

Shylands

简洁、大粗字体、绝佳的色彩应用…

screenshot

Superawesome

非常无与伦比的插画样式和色彩风格.

screenshot

Happy Cog

一个经典的漂亮的网站。

screenshot

Free People

我最喜欢的商务网站只有. The amount of details spent on this site is incredible.

screenshot

Wish Tree

背景上的愿望和标签很有创意!

screenshot

Biola Undergrad

另一个艺术类的设计.

screenshot

Viget Labs

JS和CSS的良好应用(我的意思是滚动效果).

screenshot

Svenigson

非常干净的Box布局.

screenshot

Stuff and Nonsense

Andy Clarke的网站.

screenshot

J R Velasco

Miguel Ripoll 设计(我最喜欢的设计师之一). 他对网页排版很有感觉 ,布局看起来挺乱,但是内容却是精心整理过的。

screenshot

Explore Cascadia

一个字:漂亮

screenshot

Yellow Stone Park

在Box范围内的优秀设计

screenshot

Elliot Jay Stocks

Elliot Jay Stocks的一个设计博客.他是一位很有个性的天才设计师 (结论来自于我和他的谈话).

screenshot

Freelance Switch

良好的设计和精彩的内容(自由职业相关).

screenshot

Knoxville

抽象类流行样式

screenshot

Electric Pulp

我非常喜欢水彩效果

screenshot

Vivabit

我不是个喜欢流体样式设计的人,但是这是一个非常好的。

screenshot

Surfgarden

漂亮简洁的2栏博客设计。

screenshot

Tanya Merone

另一个单页面网站的范例

screenshot

Matt Brett

Matt Brett的博客, 他是个游戏玩家

screenshot

Larissa Meek

Larissa Meek的一个漂亮的博客,她从前是个模特,现在是 AgencyNet的一位艺术导演.

screenshot

Noodle Box

对比颜色的良好应用

screenshot

Kineda

Terry and Tami Ng 的博客(明星和娱乐新闻).

screenshot

Pod3.tv

另一个设计优秀的博客

screenshot

Kev Adamson

另一个写生风格的设计

screenshot

Eleven3

另一个流行/抽象的表现

screenshot

Turbo Milk

图标很漂亮

screenshot

Veerle’s Blog

另一个经典的优秀博客。

screenshot

31three

Jesse Bennett-Chamberlain的博客和作品集。

screenshot

 

原文地址:http://www.webdesignerwall.com/trends/best-of-css-design-2007/

翻译不到位之处,还请高手指正!

专家谈CSS设计

CSS 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些鲜为人知的CSS属性来创建适用性比较强的正确标注.

下面引用的70个专家技巧,附加了他们的相关文章地址.

 

1.1. Workflow: 上路

  • 当你确定了设计思路, 请用一个空白页面展开设计. “包括页头 , 导航条, 内容样例 和页脚  之后添加HTML标记, CSS控制,这样会让事情简单清晰起来.” [CSSing]
  • 务必要重置CSS样式表 “你可能会经常删除哪些不必要的特殊设置, 而充分利用每个特性的缺省值. 而另一些人则倾向于做全局重置 Global white space reset , 就是在样式表的开头把所有要素的边据(margin)和空距(padding)全部归零. Eric Meyer’s Global Reset(全局重置), Christian Montoya’s initial CSS file(初始化CSS文件), Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
  • 使用主样式表master stylesheet. “一个常见的错误就是, 我看到很多初学者和中级玩家, 在使用样式表的时候, 由于不同的浏览器对一些样式有不同的缺省设置, 再没有统一化的情况下, 就会导致在不同浏览器中显示效果不一致. 而招致程序员抱怨调试困难. 其实, 你只要重置这些设置, 很多问题都可以得到避免. ” [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr]
  1. master.css
  2. @import url("reset.css");
  3. @import url("global.css");
  4. @import url("flash.css");
  5. @import url("structure.css");
  1. <style type="text/css" media="Screen">
  2. /*\*/@import url("css/master.css");/**/
  3. </style>
  • 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class="floatLeft alignLeft width75">...</p>用了三个类名称来标记<p/>). [Richard K. Miller]
  1. CSS:
  2. .width100 { width: 100%; }
  3. .width75 { width: 75%; }
  4. .width50 { width: 50%; }
  5. .floatLeft { float: left; }
  6. .floatRight { float: right; }
  7. .alignLeft { text-align: left; }
  8. .alignRight { text-align: right; }

1.2. 组织化CSS编码

  • 使用主样式表组织化CSS “用主样式表组织化的样式非常有利于网站维护 . 在这个样式表中输入 reset.css, global.css, flash.css (如果需要) 和 structure.css 以及间歇使用的拓扑样式, 这里是一个如何使用这些技术的样例”
  1. h2 { }
  2. #snapshot_box h2 {
  3. padding: 0 0 6px 0;
  4. font: bold 14px/14px "Verdana", sans-serif; }
  5. #main_side h2 {
  6. color: #444;
  7. font: bold 14px/14px "Verdana", sans-serif; }
  8. .sidetagselection h2 {
  9. color: #fff;
  10. font: bold 14px/14px "Verdana", sans-serif; }
  1. /* -----------------------------------*/
  2. /* ---------->>> GLOBAL <<<-----------*/
  3. /* -----------------------------------*/
  • 用一个内容表来组织样式表. 在你的CSS文件头, 画一个内容表, 例如, 你可以勾画出CSS控制的不同区域, 用醒目的分割来划分他们.  [5 Steps to CSS Heaven(5步跨进CSS天国)]
  • 用字母次序表规划样式表. “我不知道怎么想到这个主意的, 反正用了几个月, 发现找到这些样式很容易.(译者注: 对于中文用户, 除非每个样式的名称很准确,并能被大家理解, 否则可用性会很差.)” [Christian Montoya]
  1. body {
  2. background:#fdfdfd;
  3. color:#333;
  4. font-size:1em;
  5. line-height:1.4;
  6. margin:0;
  7. padding:0;
  8. }
  • 把代码分成不同的块.. “很多人直觉上都会这么做, 只要变成习惯, 经年累月的实践, 这应该是最好的办法. 例如:: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks(CSS窍门和魔法)]
  • 钩子, 线, 和铅坠Hook, line, and sinker. 一旦你的CSS文档已经分成了不同的区块, 你就应该思考, 如何让这些小节点上的钩子结构化, 这将给你节省大量的时间, 并让文档更有说服力.” [Ryan Parr]
  • 把样式表分成不同的块. “我通常把自己的样式表分成三个块. 第一部分是元素直白定义, 变换文体, 页头风格, 重置表单的间距, 一些链接的风格, 等等. 接下来, 我会定义一些类, 例如提示框, 警告框,  等等, 我倾向于先定义主容器, 然后定义这个主容器中的元素, 这样扫一眼,就可以看到文档的规划结构, 对于哪些没有约束的容器, 我一般也要给他们一个名字.” [Jonathan Snook]

1.3. Workflow: 控项编号, 类, 同类项, 属性 Handling IDs, Classes, Selectors, Properties

  • 让容器最小化. “结构化灌装文档. 新手会使用很多像表格一样的单元去构建一个文档. 而用结构化的要素构建文档才是最有效的. 要做到这点, 必须开始之前统盘考虑所有要素, 争取用通用的结构获得相同的效果, 而不是不断定义哪些小巧的DIV单元. ” [Ryan Parr]
  • 属性最小化. “善用CSS. 这个大原则可以派生很多小原则: 如果没有一个点来增加属性, 就不要增加, 如果你不确定该属性的用途, 就不要增加, 如果相同的属性被赋予很多地方, 争取在一个地方定义它.” [CSSing]
  • 同类项最小化. “避免不必要的同类项, 同类项越少, 问题就越容易处理.” [Jonathan Snook]
  • CSS 修复点(hack)最小化. “除非是公认的或文档化的缺陷, 尽量不要使用修复点. 我常常看到的情况是, 修复点本身变成了问题. 最好找到问题的根源, 从根本上解决或避免, 而不是滥用修复点.[10 Quick Tips for an easier CSS life(10个让CSS更简单的窍门)]
  • 使用CSS常量开发. “所谓常量 – 就是在很多地方使用的固定数值. 在CSS文档前面创建这些常量的说明, 颜色对照表, 利用替换的方式, 可以减少修订中的错误.” [Rachel Andrew]
  1. # /*
  2. # Dark grey (text): #333333
  3. # Dark Blue (headings, links) #000066
  4. # Mid Blue (header) #333399
  5. # Light blue (top navigation) #CCCCFF
  6. # Mid grey: #666666
  7. # */
  • 使用通用命名空间. 一套好的命名体系, 会在修复缺陷时, 节省大量时间. 我建议使用 parent_child 结构. [10 CSS Tips]
  • 按语法定义类和编号. “错误的名称会引起岐义, 不便于沟通协作, 也会导致重复定义”. [Garrett Dimon]
  • 用通用的CSS定义给同类项编组. “当一些元素的类型,类,或ID:s 使用相同的属性, 你可以把这些同类项编组, 以便一起定义, 而不是分开重复定义” [Roger Johansson]
  • 如果一个独立属性需要复用, 就把它独立出来. “如果你发现一个属性的定义被广泛使用, 不妨把它单拿出来定义” [5 Steps to CSS Heaven]
  • 尽可能树状化表达你的编号和类. 文档的层次化 contextual selectors 十分必要. 这样可以使文档更容易阅读和使用. [Chric Casciano]
  • 学会充分利用CSS的瀑性(继承性)特征. “如果你的网站中有两个类似的显示区(box),你愿意定义两个样式, 还是定义一个样式后, 用一个外部样式对它进行修正?” [5 Steps to CSS heaven]
  • 使用工具化标记(Tag): <small>, <em><strong>. “可以充分使用这些工具化标记, 对XHTML来说, 它具有更好的语意结构性, 过多的利用类来定义类似的要素, 会让文档结构本身的语法环境遭到破坏”. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: 使用缩写标注

  • 缩写十六进位色彩标注. “在颜色定义中: #000 等同于 #000000, #369 等同于 #336699  [Roger Johansson]
  • 用 LoVe/HAte-次序定义链接伪类 Link, Visited, Hover, Active. “可以确保你看到所有的链接样式.” [Eric Meyer]
  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: purple; }
  4. a:active { color: red; }
  • 用 TRouBLed-次序定义外边距, 内边距和边框: Top, Right, Bottom, Left. “用顺时针的方向,从顶部开始定义, 养成这种习惯,还可以用缩写法快速定义.” [Roger Johansson]
  • 使用缩写属性 shorthand properties.
    “使用缩写定义 margin, padding and border 属性可以节省大量空间.
  1. CSS:
  2. margin: top right bottom left;
  3. margin:1em 0 2em 0.5em;
  4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
  1. CSS:
  2. border:width style color;
  3. border:1px solid #000;
  1. CSS:
  2. background: color image repeat attachment position;
  3. background:#f00 url(http://www.blog.com.cn/background.gif) no-repeat fixed 0 0;
  1. CSS:
  2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
  3. font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Workflow: 建立拓扑结构

  • 用62.5%的比例, 保持 EM单位和PX单位的协同性.  font-size 的缺省值是 16px; 利用这个原则, 你可以换算一个 Em 大约是10像素  (16 x 62.5% = 10). “我倾向于让不同文字之间的比例保持在62.5%. 这样可以让你同时用em 和 px 两种方法思考 ” [Jonathan Snook]
  • 使用通用字符集UTF-8编写代码. . [20 pro tips]
  1. <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  • 使用 CSS转换大小写. 如果你相让一些内容全部大写, 很简单,只需要在CSS中做如下定义即可”. [20 pro tips]
  1. h1 {
  2. text-transform: uppercase;
  3. }
  • 使用 small-caps . 例如:
  1. h1 {
  2. font-variant: small-caps;
  3. }
  • Cover all the bases – 定义通用字体. “如果我们使用某些特殊的字体, 必须要确定浏览者的机器上也装载这些字体, 因此我们必须了解哪些是通用的字体, 才能保证设计和展示是一致的. [Getting into good coding habits]
  1. p {
  2. font-family: Arial, Verdana, Helvetica, sans-serif;
  3. }
  • 用 1.4em – 1.6em 定义线高 line-height.line-height:1.4”  合理的线长 line-lengths应避免超过10个单词 . 例如纯黑或纯白在CRT显示器上过亮. 尝试使用次白 (#fafafa) 和灰黑(#333333,).比较理想” [Christian Montoya]
  • 用 100.01% 定义HTML元素(html-element). 这个特义值 100.01% 定义字符大小可以解决很多浏览器的bug. 首先, 用百分比设置缺省的 body font size 就用这个值, 这样基本上可以解决IE, Opera, Safari中的字体不同大小和缩放的问题.” [CSS: Getting into good habits]

1.6. Workflow: 调试

  1. * { border: 1px solid #f00; }
  • 调试时, 先检查封闭元素. “很多意想不到的错误,都是由于该封闭的元素,没有被封闭导致的”. [10 CSS Tips]

2.1. 技术窍门: IDs, Classes

  • 每页只能有一个ID, 但可以有多个类. “检查你的 IDs: 一个页面只能有一个元素使用一个确定的ID,很多元素可以用相同的类定义, 注意 ID 和 Class 的名字只能用使用 [A-Za-z0-9] 的字母或数字以及连接符号 (-), 开始字母不能用数字或连接符号(参照 CSS2 语法和类型.” [Roger Johansson]
  • 元素在同类项(selectors)中是大小写相关的. “记住大小写相关. 当 CSS用在XHTML, 因为XML是大小写相关的.” [Roger Johansson]
  • CSS classes 和 IDs 必须合法. “我们在定义这些对象的使用最好用他们的功能, 而不是他的外观” [CSS Best Practices]
  • 一个元素可以使用多个类“你可以分配多个类给一个元素, 因此你通过多定义一些不同的类,而有选择的使用他们,完成你对样式的约束.” [Roger Johansson]

2.2. 技术窍门: 利用同类项

Roger Johansson 曾写过很有用的一篇文章 CSS 2.1 Selectors. 强烈推荐阅读这篇文章.你可以发现很多有用的东西. 例如同类项父子定义 ‘>’ 和 ‘+’ 在 IE6 和早期版本中并不支持.

  • 你可以使用子同类项. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
  1. div > strong { color:#f00; }
  • 使用多血缘同类项(adjacent sibling selector ). An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
  1. p + p { color:#f00; }
  • 使用特性同类项 一个特性同类项, 可以通过四种方式找到要定义的对象:
  1. [att]
  2. Matches elements that have an att attribute, regardless of its value.
  3. [att=val]
  4. Matches elements that have an att attribute with a value of exactly “val”.
  5. [att~=val]
  6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
  7. [att|=val]
  8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.
  9.  
  • The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
  1. p[title] { color:#f00; }
  • The selector matches all div elements that have a class attribute with the value error:
  1. div[class=error] { color:#f00; }
  • Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
  1. blockquote[class=quote][cite] { color:#f00; }
  • 使用降阶同类项descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. 技术窍门: 链接样式化

  • 如果使用锚点, 你要小心. “如果在你的编码中使用锚点 (<a name="anchor">) 你要注意, 他会使用 :hover:active 这些伪类. 为避免这些问题, 你要使用ID 来定义这些锚点,或使用内部约束 slightly more arcane 语法: :link:hover, :link:active” [Dave Shea]
  • 定义链接关系 “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
  1. a[rel~="nofollow"]::after {
  2. content: "\2620";
  3. color: #933;
  4. font-size: x-small;
  5. }
  6. a[rel~="tag"]::after {
  7. content: url(http://www.technorati.com/favicon.ico);
  8. }
  • “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
  • You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
  1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
  2. content: "\2197";
  3. }
  • 利用 outline: none;来去除链接产生的虚点框. 这一点对导航条很有用 remove dotted links
  1. a:focus {
  2. outline: none;
  3. }

2.4. 技术窍门: CSS-技术

  • 付给<body> 标记一个 ID. “大多数情况下, 给body 放置一个 ID , 可以逐页控制CSS, 而不必要不断更换模板” [Ryan Parr, Invasion of Body Switchers]
  • 用CSS创建相同高度的列. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
  • 用 CSS做垂直布局. “假设你有一个导航菜单高度是2em. 解决方案: 在CSS中把线高设定成和显示模块一样的高度.在这个案例中,字符可以在显示模块中间浮动. ” [Evolt.org]
  • 使用伪元素 pseudo-elements 和类 classes 创建动态内容. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
  • 通过设置 <hr> 分割的更漂亮. “把水平分割线 (<hr>) 用图形代替可以增加页面的美观性. [CSS: Best Practices]
  • 在每个页面使用相同的导航条 (X)HTML-编码. “许多网站都想强化导航条, 但你需要在每个页面优化导航条代码, 我们如何把两者完美的处理好呢?” [Ten More CSS Tricks you may not know]
  1. XHTML:
  2. <ul>
  3. <li><a href="#" class="home">Home</a></li>
  4. <li><a href="#" class="about">About us</a></li>
  5. <li><a href="#" class="contact">Contact us</a></li>
  6. </ul>
  • Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
  1. CSS:
  2. #home .home, #about .about, #contact .contact
  3. {
  4. commands for highlighted navigation go here
  5. }
  • 布局中,使用” margin: 0 auto;" 水平居中. “利用 CSS来水平居中一个元素, 你需要设定这个元素的宽度,和水平间距就可以做到.” [Roger Johansson]
  1. XHTML:
  2. <div id="wrap">
  3. <!-- Your layout goes here -->
  4. </div>
  1. CSS:
  2. #wrap {
  3. width:760px; /* Change this to the width of your layout */
  4. margin:0 auto;
  5. }
  • 给 RSS-feeds附加样式. “用 XSL stylesheet (turn links into clickable links, etc)格式化, CSS让非技术人员更能接受. [Pete Freitag]
  1. <?xml version="1.0" ?>
  2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  3. ...
  • 在老的浏览器中隐藏CSS . “最基本的办法就是利用@import 方法,解决隐藏问题.”   [Roger Johansson]
  1. @import "main.css";
  • 在块级的元素定义中, 必须声明外间距和内间距Always declare margin and padding in block-level elements. [10 CSS Tips]
  • 要么设定宽度, 要么设定内间距和外间距 “我的一个重要原则是, 如果我设定了宽度,就不必要设定间距, 同理, 如果设定了间距, 就不必要设定宽度. 在盒状显示模块中, 特别你你用百分比处理的情况下, 我才用设定容器宽度, 里面的元素使用间距设定, 这样一切就会变得游刃有余. ” [Jonathan Snook]
  • 避免使用内间距/边框 和固定的宽度同时定义一个元素. “IE5 会让这样的定义出错, 一切变得一团糟. 为修订宽度的错误, 在父对象中设置内间距,取代子元素固定宽度的方法. [CSS Crib Sheet]
  • 提供打印样式.
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  2. or
  3. <style type=”text/css” media=”print”> @import url(print.css); </style>
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. 技术窍门: IE 改进

  • 强制 IE 透明化处理 PNG图像. “理论上, PNG 文件支持不同的透明度; 但是. 一个Explorer 6 缺陷让这种方法很难跨浏览器使用” [CSS Tips, Outer-Court.com]
  1. #regular_logo
  2. {
  3. background:url('test.png'); width:150px; height:55px;
  4. }
  5. /* \ */
  6. * html #regular_logo
  7. {
  8. background:none;
  9. float:left;
  10. width:150px;
  11. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  12. }
  13. /* */
  1. #container
  2. {
  3. min-width: 600px;
  4. max-width: 1200px;
  5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  6. }
  • 在IE中使用条件说明 “在IE/WIN中,最安全的方式是使用条件说明 conditional comments. 这比使用修正点更有效. 利用这种方法, 可以让IE 使用自己的样式, ” [Roger Johansson]
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="http://www.blog.com.cn/ie.css" />
  3. <![endif]-->

Workflow: 获得灵感

参考和推荐内容:

具有亲和力的文字隐藏方法

一个新的,更加具有亲和力的CSS隐藏文字方法介绍,来自sonspring.com,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。

1.display:none;的缺陷

  • 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,来自SEO Mistakes: Unwise comments
  • 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden 
{
 display:block;/*统一转化为块级元素*/
 overflow: hidden; 
 width: 0; 
 height: 0; 
}

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

延伸阅读:
Google, SEO and using CSS to hide text

术语:
可访问性(Accessibility)
是使残疾人更容易地使用应用程序的惯例。
1990 年的美国残疾人法案(The American Disabilities Act)
1996 年的电信法案(The Telecommunications Act)
1998 年的康复法案修正案(Rehabilitation Act Amendments)508 条款
万维网联盟(W3C)的 Web 可访问性倡议(Web Accessibility Initiative(WAI))
这些都是可访问性标准。在 Law and disabilities页面上可获得更多信息。

屏幕阅读器(Screen Reader)
是为视觉上有障碍的人设计的读取屏幕内容的程序。

可用性(Usability)
使每个人都更容易地使用应用程序的惯例。可访问性是可用性中的一类。

Web 浏览器(Web Browser)
可以显示 Web 页面的任何程序。大多数 Web 浏览器可以显示 HTML 页面,但有些(诸如移动电话中的浏览器)可能只显示诸如 WML 或 cHTML 那样的其它类型的页面。

让IE支持PNG格式的JS库

介绍
http://www.schillmania.com/content/projects/png/
Demo
http://www.schillmania.com/projects/png/

原理
1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片
2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换

使用
1.在<head>调用png.js

<script type="text/javascript" src="png.js"></script>

下载地址:http://www.schillmania.com/projects/png/png-demo.zip
2.用类png标记需要使用png格式的地方
首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片

 <img src="your-image.gif" class="png" style="width:XXXpx;height:YYYpx" />

背景图片

<div class="png" style="width:xxxpx;height:xxxpx;background-image:url(your-image.gif);background-repeat:no-repeat">
</div>

3.在</body>之前加入

 <script type="text/javascript">
 pngHandler.init();
 </script>

总结
这样做png图片使用起来就方便多了,不用重复的去使用IE滤镜,比起手动使用IE滤镜同时加载的图片数量加倍,增加并发连接数

css处理浏览器兼容技巧总汇

css里关于浏览器的兼容问题一直困惑着我们初级的css用户(高手可直接绕过),这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里学到的有关处理浏览器兼容的问题,根据我前段时间在公司minisite项目里碰到的一些问题和解决方法分享给大家。浏览器兼容性的问题,我想一直是困绕我们设计师的棘手问题,css的难点就在这里。解决好这个问题,我想你的css水平一定会得到大步的提升。

自从W3C标准推出以后,现在新的一些浏览器多多少少在使用这套web的新标准,但在各自对新标准的执行上并不统一,这就给我们设计师带来很多的问题。目前世面上主流的浏览器还是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面大部分人在用IE6和IE7两个版本的浏览器,而这两个版本对css的支持有非常多的差异之处,这种差异是最需要我们设计师注意的,因为它跟我们的日常设计息息相关。我在实际的制作过程当中遇到的问题有绝大部分是出现在IE6和IE7的css兼容性问题上。IE6,IE7在加上firefox2.0,如果能把这三个浏览器都搞定了,也就基本上满足95%以上的用户了。在下面我列举了一些我在项目里碰到的实际的问题和解决的方法,其中有很多是css高手GL的处理思路和解决方法,非常值得吸取和借鉴,因为这为我们解决今后遇到类似的问题提供解决问题的思路。建议先阅读《css网站布局实录》这本书,现在出了新版本《css网站布局实录2》,要仔细阅读哦,相信我,的确能让你收益非浅。下面列举一些事例,希望能给大家提供一些借鉴:

A: IE6/IE7 div等块对象默认具有高度
下面图A是IE6里的一个div,  宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我们设计师在实际制作过程当中带来问题,因为有的时候我们要设置一个div高度为5px,用于放置一张背景图片,在IE6里就会有问题。IE6的显示保持在了最低高度一个br,如图c,在同样设置height:5px;情况下,上面是firefox显示下面是IE6。解决的方法是在div里设置一下line-height:0px;


图A


图B


图C

B: IE6下块对象默认的3PX现象
如图,上面是IE6.0里的显示,下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽度正好的情况下,在IE7和firefox下可以上去,而在IE6里面就被显示在了第二行。这就是IE6的著名的3px现象,当一个对象设置为左悬浮,这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的方法是针对于IE6,在css里写一个css hack, 如在左边的div上加:margin-right:0px!important;margin-right:-3px;!important这个标记IE7和firefox是支持的,而我们伟大的IE6却视而不见,我们就可以根据这个特点,让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。

有兴趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题,下面代码人为增加了一些空格,请copy的时候自行删去)
< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >

C: 图层float实现页面布局,遇到的浏览器问题
这是我在具体做项目时实际遇到的问题,解决这个问题的思路和方法来自GL的支持,我把它整理出来分享,希望能给你有所帮助。

看下面图1,现在一共有divA, divB, divC, divD, divE这么5个div, 目标是让divD和divE移上去,跟divA其行显示,达到图2的效果。我在当时实现的时候,在divA,divB,divC里分别加上style=”float:left;clear:both”,这样在IE6和IE7里实现了图2的效果,但在firefox里就出现了图3的显示,我在当时试过很多方法, 如在div4里写float:right;让div4有悬浮,想让它上去,这样只能跟divC并列显示。对css感兴趣的人可以先自己试试,其实方法很是简单,给div4和div5分别设置个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单,这里是提供一种解决css兼容问题上的一种思路。


图1


图2


图3

D: 如何让图片在div里左右居中,上下居中
如下图1, 我们要让图片在IE6,IE7和firefox下图片相对div左右居中,上下居中来显示如图2,这是众多设计师可能都要面对要解决的问题,因为这种方式我们经常要用到。这里把解决的方法分享给大家,要想让图片左右对齐,我们可以在div里写入”style:text-align:center;”,左右居中问题好解决,现在看一下,IE6,IE7和firefox里,图片都已经是左右居中了,技术的难点是如何让图片在三个浏览器垂直居中。大部分人可能会考虑使用vertical-align:middle来使图片居中,加上去看看没有出现效果,这里我们针对图片设置如下代码:style=”_margin-top: expression(( 300 – this.height ) / 2);发现在IE6下效果实现了,再看看IE7和firefox, 没有变化,这里我们针对IE7和firefox来设置,在div里写入line-height:300px;vertical-align:middle,发现IE7这时候也有效果了,这里的line-height:300px;是根据div的高度定的,如果div的高度为100px,则这里设置line-height:100px,这里我们设置为300px。那么,这时候IE解决了,看一下firefox图片还没垂直居中,再对div增加样式:display:table-cell,现在再看看firefox也好了。


图1


图2

参考代码:
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />
< /div >

E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时,就会出现捉迷藏情况。如下面例子:

起初我们写上比较简单的结构代码,如下:

上面代码非常简单,现在我们在里面尝试增加一些内容:

为了让bug显示,我们给上面的xhtml写上css样式,如下:

然后我们到IE7.0 firefox里先后去预览一下,显示一切正常,如下图1。

图1

我们再到IE6去打开它,发现在刚刚打开的时候,看到如下图2的情况,右侧的内容奇怪的消失了。全选页面内容,发现右侧内容是存在的,如果用鼠标移到链接上面,右侧的内容又跑了出来,这就是IE6著名的捉迷藏现象。不仅在目前事例中,在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类,至今为止,这种情况只在IE6下出现。

图2

解决这个问题的方法,可以参考positioniseverything.net的网站专家给出的一些建议:
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能,给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性,强制浏览器对内容文字进行行距调整。

以上是提供解决浏览器问题的一些技巧,positioniseverything.net网站专家的建议,更重要的是要养成良好的编码习惯来预防捉迷藏情况的发生。

一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性,如果我想要只针对IE7/firefox起作用,写法如下:
[xmlns] #left {
 float:left;
 border:4px solid #999;
 padding:5px;
 width:200px;
 height:200px;
}
c: 只针对IE6起作用,可以在css前面加* html,如:
* html #left {
 clear:both;
}

d: 只针对IE7起作用,在css里前面加*+html,如:
*+html #left {
 clear:both;
}

解决IE6、IE7、Firefox兼容最简单的CSS Hack

很早就看到过解决方案,发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正’1-2个属性就可以了。

具体写法很容易:

#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看
  • 第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:fixed,而且,,可以做到不引入JavaScript代码(仅用IE6的expression),我这里有一个现,CSS如下写:

#ff-r
{
position:  fixed;
_position:  absolute;
right:     15px;
top:       15px;
_top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop+15 :
document.body.scrollTop +
(document.body.clientHeight
-this.clientHeight));
}

是不是很方便:)

CSS hacks与争议

1、说明本文阐述了我们发现的在用CSS设计中有用的解决方案。

2、浏览器特定的选择器

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。

IE6以下

*html{}

IE 7 以下

*:first-child+html {} * html {}

只对IE 7

*:first-child+html {}

只对IE 7 和现代浏览器

html>body {}

只对现代浏览器(非IE 7)

html>/**/body {}

 

最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=””] body:last-child {}

要使用这些选择器,请在样式前写下这些代码。例如:

#content-box {
width: 300px;

height: 150px;

}

* html #content-box {

width: 250px;

}

/* 重写上面的代码并且把宽度改为250PX

在IE6以下版本中适用。 */

3、在IE6中使用透明PNG图片

IE6的一个很难处理的BUG就是它不支持透明PNG图片。

你可能需要用一个重写的CSS的滤镜来解决这个问题:

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil

ename.png”, sizingMethod=”scale”);

}

4、去掉连接虚线框

当你点击链接时,Firefox会在链接周围产生一个虚线外框。

 

这个很好解决,只需在a标签中添加outline:none就可以了。

a{

outline:none;

}

5、对inline元素应用宽度。

如果你对一个inline元素使用宽度,它将只在IE6下起作用。

所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a><strong>和<em>Block标签包括<div><p><h1><form>和<li>

你不能控制inilne标签的宽带,不过有一个方法是把标签属性从inline改为Block。

span{

width:150px;

display:block;

}

应用display:block能够把span标签变成block标签,从而控制它的宽度。

6、使一个固定宽度的网站居中。

为了让你的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto。

#wrapper {

margin: auto;

position: relative;

}

7、图片替换技术

对于头部来说,永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点。

HTML:

<h1><span>Main heading one</span></h1>

CSS:

h1 {

background: url(heading-image.gif) no-repeat;

}

h1 span {

position:absolute;

text-indent: -5000px;

}

正如你所见,我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们。

8、最小宽度

IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为他告诉浏览器停止收缩。

对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如:

.container {

min-width:300px;

}

要让这些在IE6下起作用的话你要添加额外的努力!你需要创建两个DIV,一个包含着另一个。

<div class=”container”>

<div class=”holder”>Content</div>

</div>

然后你需要设置外面层的min-width:

.container {

min-width:300px;

}

现在又要IE hack起作用了,你需要写下以下代码:

* html .container {

border-right: 300px solid #FFF;

}

* html .holder {

display: inline-block;

position: relative;

margin-right: -300px;

}

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时,这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

9、隐藏水平滚动

要去除水平滚动条,可以在body中插入overflow-x:hidden属性。

body {

overflow-x: hidden;

}

这在你决意要用一个比浏览器款的图片或Flash时很有用。

翻译说明:这是Solid State Group网站上的一篇很友好的文章,解决了我的很多问题。在此我翻译其文,并对原作者表示非常感谢!原文地址: http://www.solidstategroup.com/page/1592

WEB项目前台开发管理的思考

WEB前端,指的是:交互-设计-制作三个角色的组合。
项目管理,指的是如何把需求分解成任务,分派给合适的人并正确的完成任务。
需要把握的是:
1.需求分析
需求分析的目的是评审需求的可行性和优先级,这里就需要足够的项目经验了。
可行性:
关于需求本身是否合理,是否是一个值得去做的需求。
需求的完整性,是否是一个完整的,可以进入研发规划的需求。
其实还有一个需求的充足性,将零零散散的小运营需求合并为一个大的需求,便于开发,让任务列表清晰简洁,维护风险降低。
再次是需要后台开发的,进行沟通,是否下一个研发线能评审通过和按时跟进。

优先级,优先级的参考依据是重要性和紧急性。画出一个二维坐标轴来,就能清楚的分辨出。
1. 重要而且紧急的需求当然优先级最高。
2. 重要的其次
3. 紧急不重要的再次(可能就要pass,很少见)
4. 不紧急而且不重要的最后(基本没有)

而根据产品的性质不同,有可以在以上基础上再进行划分,比如平台类的,增值类,运营类的(bug的修复,体验的小优化),日常维护类(定期的运维需求,如图片的设计,固定模式的活动需求等等),可以将他们填充在二维坐标的四个象限中。

2.分解任务
如何把需求分解成为一个个可行的任务,一般来说就是交互-设计-制作一条线的滚动任务。任务包括内容和开发周期。
1.新版本的研发需求,需要立项规划。
2.有固定模式的活动类需求,需要立项规划。
3.活动类需求,这类属于完整的规模相对较小的项目,但是五脏俱全,都需要交互-设计-制作参与。
4.其次就是很多的运营类需求,这类需求很杂,而且零零碎碎,不是三种角色都参与的那种。

3.任务分派
任务分派的目的是在前两个的基础上,达到任务在正确的时间分派给正确的人。人和人的能力差距是存在的,所以将重要的难度较高的需求分给更加有能力和经验的人,根据重要性和难度依次排序进行分派,还有就是熟悉的任务分给熟悉的人(某人一直在跟进这方面的需求)。
任务的时间分派,根据任务的重要级别和规模依次递减。具体时间需要多方沟通而定,但是根据以往的任务完成情况,可以评估其产能,使用多少人/天的单位也是能粗略得到时间点。

4任务质量评审
这里就是任务完成后,是否达到要求,表现为
基本质量:交互的完整性,设计稿的完整性,制作的完整性
高级质量:这些不好估量,需要根据具体领域的不同做不同的评判,比如交互的体验性强,表现的视觉传达到位,制作的易于开发,还原设计稿,打开速度提升等等。更多的是属于技术类小组的质量评估。

这只是项目管理中最常见的一些点,其他还有很多很多的危机处理的办法和项目流程的规范化,考核制度的完整化等等,希望有此经验的您多多交流。