争议之一：链接是否应该在新窗口打开

正方:

外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

反方:

作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗口或标签，这才是真正让人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了后退按钮更让他们无所适从。

和事佬:

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

争议之二：在链接中应该使用诸如Click here 一类的笼统词汇吗？

正方:

事实证明，Click here 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

反方:

Click here 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

和事佬:

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 Click here 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

争议之三：使用该继续使用 b 和 i 两个标签?

正方：

如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 b 标签，不该用 strong 标签，读屏软件对 b 和i 标签有不同的发音，而 HTML5 规范中仍包含这两个标签。

反方:

这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用 strong 或 em 标签。

和事佬：

b 和 i 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 strong 或 em 标签。只有在那些没有别的标签可用的场合，才可以考虑 b 和 i 。

争议之四：站点 Logo 是否因出现在 h1 标签中?

正方:

Logo 不应包围在标题标签中，标题标签应该包含这个页面的标题或描述性内容，这是 SEO 的最佳方式，否则，站点中的每个页的标题岂不是全变成公司名字了？

反方:

一个站点最明显的标志是它的 Logo， 而 h1 是一个页面最顶级的标题，将 Logo 包围其中很自然，这样，即使没有 CSS 人们也很容易该明白这个页面的结构。

和事佬:

标题标签的作用是描述内容的层级结构，如果一个站点有一个描述站点内容的标题，应该放在 h1 中，否则，第二级结构或描述性的对象，就是 Logo。

争议之五：是否应该支持 IE6？

正方:

IE6 现在仍占有 10% 的市场份额（在国内更高-译者注），因此，网站毫无疑问应该支持 IE6。世界上仍然有很多公司的系统仍需使用 IE6 访问，另外，还有很多人根本不知道怎么升级他们的浏览器。

反方:

IE6 已经过时，不支持最新的 Web 技术，它给在线用户带来安全隐患，也是众多 Web 开发设计师的噩梦。包括 YouTube 在内的大型站点已经停止支持 IE6。你也不例外。

和事佬:

IE6 毫无疑问在衰退，随着大公司对它的抛弃，它的死亡可能来得比预期还快，是否支持 IE6 要看的具体情况，可以考虑为 IE6 用户提供最基本的页面格式，而不必为它挣扎。

本文来源：http://line25.com/articles/top-5-web-design-debates-that-cause-the-most-riots

在 Web 空前繁荣的今天，有关 Web 设计中的各种观点很多会成为话题，有的很快达成一致，有的则一直争议下去，本文讲述 Web 设计中的 5 大经典争议，这些争议从它们诞生的那天起，就被正反两方争得不亦乐乎。

争议之一：链接是否应该在新窗口打开

正方:

外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

反方:

作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗口或标签，这才是真正让人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了后退按钮更让他们无所适从。

和事佬:

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

争议之二：在链接中应该使用诸如Click here 一类的笼统词汇吗？

正方:

事实证明，Click here 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

反方:

Click here 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

和事佬:

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 Click here 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

争议之三：使用该继续使用 b 和 i 两个标签?

正方：

如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 b 标签，不该用 strong 标签，读屏软件对 b 和i 标签有不同的发音，而 HTML5 规范中仍包含这两个标签。

反方:

这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用 strong 或 em 标签。

和事佬：

b 和 i 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 strong 或 em 标签。只有在那些没有别的标签可用的场合，才可以考虑 b 和 i 。

争议之四：站点 Logo 是否因出现在 h1 标签中?

正方:

Logo 不应包围在标题标签中，标题标签应该包含这个页面的标题或描述性内容，这是 SEO 的最佳方式，否则，站点中的每个页的标题岂不是全变成公司名字了？

反方:

一个站点最明显的标志是它的 Logo， 而 h1 是一个页面最顶级的标题，将 Logo 包围其中很自然，这样，即使没有 CSS 人们也很容易该明白这个页面的结构。

和事佬:

标题标签的作用是描述内容的层级结构，如果一个站点有一个描述站点内容的标题，应该放在 h1 中，否则，第二级结构或描述性的对象，就是 Logo。

争议之五：是否应该支持 IE6？

正方:

IE6 现在仍占有 10% 的市场份额（在国内更高-译者注），因此，网站毫无疑问应该支持 IE6。世界上仍然有很多公司的系统仍需使用 IE6 访问，另外，还有很多人根本不知道怎么升级他们的浏览器。

反方:

IE6 已经过时，不支持最新的 Web 技术，它给在线用户带来安全隐患，也是众多 Web 开发设计师的噩梦。包括 YouTube 在内的大型站点已经停止支持 IE6。你也不例外。

和事佬:

IE6 毫无疑问在衰退，随着大公司对它的抛弃，它的死亡可能来得比预期还快，是否支持 IE6 要看的具体情况，可以考虑为 IE6 用户提供最基本的页面格式，而不必为它挣扎。

本文来源：http://line25.com/articles/top-5-web-design-debates-that-cause-the-most-riots

一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
　　您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如

　　在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
　　块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制

　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
　　除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。
　　块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
　　行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box） ，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
　　在下面，我们会为您详细讲解相对定位、绝对定位和浮动。

CSS position 属性

　　通过使用 position 属性 ，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。
　　position 属性值的含义：
　　static
　　元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
　　relative
　　元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
　　absolute
　　元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
　　fixed
　　元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
　　提示： 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS 定位属性

　　CSS 定位属性允许你对元素进行定位。
　　属性 描述
　　position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
　　top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
　　right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
　　bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
　　left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
　　overflow 设置当元素的内容溢出其区域时发生的事情。
　　clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
　　vertical-align 设置元素的垂直对齐方式。
　　z-index 设置元素的堆叠顺序。

hmtl代码:

<span>
<button>确定充值，去网银付款</button>
</span>

css代码：

span {
 background:url(bg_comb.png) 100% 0;
 height:32px;
 display:inline-block;
 padding:0 5px 0 0;
 text-align:center;
 font-size:14px !important;
 vertical-align:middle;
 width:auto;
}
button {
 display:inline-block;
 border:0;
 background:url(bg_comb.png) 0 0;
 height:32px;
 line-height:30px;
 padding:0 10px 5px 15px;
 color:#fff;
 vertical-align:middle;
 white-space:nowrap;
 overflow:visible;
}

其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。

其实由itunes同步到iphone问题应该不是很大，稍微研究以下就可以搞定的，这里我就说以下，从iphone到itunes的一个逆向导入。貌似找了很久没有一个很好的办法。

简单说一下，我的过程：

电脑重装了系统，以前的itunes肯定也是要重装，那里面的app肯定是没有了。还好是双系统，另一个系统里也装有itunes，把里面的文件重新导入到新的系统里然后倒入就可以了的。不过在同步的时候是需要授权提示的，记住密码很重要，（用户名是已经安装过的，安装的时候是记住用户名的。）

再点击同步就完成了，当然，前提是你重装系统前备份：X:\Users\Administrator\Music\iTunes\iTunes Media\Mobile Applications 这个文件夹里的所有文件，其中的X是你的itunes的安装盘符，一般是C盘。再次声明是你有备份，没有备份的没有办法实现。此文标题可能起的有点让人无解，能帮到您那就好，如果此文对您没有意义，请别拍砖。


<table style=”cursor: pointer;” onclick=”window.open(‘http://www.52sonen.com/’, ‘_blank’)” width=”100%”>
<tbody>
<tr>
<td height=”100″ bgcolor=”#000000″></td>
</tr>
</tbody>
</table>

其实我是很不屑的，错谁都会有啊，希望他们快点看到，快点修正。嘿嘿

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。

2.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。

3. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实 际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。

4. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

• 确保所有的元素使用”display:inline;”
• 在最后一个元素上使用一个”margin-right:-3px;”
• 为浮动元素的最后一个条目使用一个条件注释，比如：

  1	<!--[if !IE]>Put your commentary in here...<![endif]-->

• 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

5. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

1
2
3
4
5

#element {
 min-height: 20em;
 height: auto !important; /* 所有浏览器都理解这段代码 */
 height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.

1
2
3
4
5
6

#element {
 min-height: 20em;
height: auto !important; 
height: 20em;
overflow: visible;
}

6. 避免百分比单位

百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

1
2
3
4

body {
 margin: 2% 0 !important;
 margin: 20px 0; /* IE6 only */
}

7. 尽早测试并不断测试

不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

8. 重构你的代码

经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 
<html  xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<title>我个是非常好的小页脚</title> 
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    /> 
<style type=”text/css”> 
html{height:100%;overflow:auto;}  
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}  
.main{border-bottom:60px solid #fff;}  
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}  
</style> 
</head> 

<body> 
    <div> 
        <div id=”topbar”>菜单部分</div> 
        <div> 
                我是主体，我是核心<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
               虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚  
        </div> 
        <div id=”footer”> 
            我是安分守己的页脚，我只安静的待在页面的最下方  
        </div> 
    </div> 
</body> 
</html>

这个效果的好处我想不需要多说，大家看看也就明白了。

FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。

其实，实现过程也不是很复杂，具体看例子：

< !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=gb2312″ />
<title>强制Firefox显示滚动</title>
<style type=”text/css”>
<!–
html {overflow:-moz-scrollbars-vertical;} /*方法一*/
html {min-height:101%;} /*方法二*/
–>
</style>
</head>
<body>
<p>强制Firefox显示滚动条：</p>
<p>方法一：html {overflow:-moz-scrollbars-vertical;}</p>
<p>方法二：html {min-height:101%;}</p>
<p>为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。</p>
</body>
</html>