Web 开发中的 5 个最具争议性的话题
2010/03/05 10:33 | 分类：Xhtml
在 Web 空前繁荣的今天，有关 Web 设计中的各种观点很多会成为话题，有的很快达成一致，有的则一直争议下去，本文讲述 Web 设计中的 5 大经典争议，这些争议从它们诞生的那天起，就被正反两方争得不亦乐乎。
争议之一：链接是否应该在新窗口打开
定位position和浮动float
2010/02/20 14:34 | 分类：Css
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如
一张背景图的自适应按钮
2010/02/10 09:20 | 分类：Css
其实很多时候都是用到自适应，用的最多的也就是导航，按钮的。根据实际字数需要，扩展或者缩小宽度。
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;
}
其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。
关于iphone与itunes同步的问题
2010/01/19 11:06 | 分类：IT
关于iphone与itunes同步的问题网上比比皆是，遇到问题的人也不少。
其实由itunes同步到iphone问题应该不是很大，稍微研究以下就可以搞定的，这里我就说以下，从iphone到itunes的一个逆向导入。貌似找了很久没有一个很好的办法。
简单说一下，我的过程：
电脑重装了系统，以前的itunes肯定也是要重装，那里面的app肯定是没有了。还好是双系统，另一个系统里也装有itunes，把里面的文件重新导入到新的系统里然后倒入就可以了的。不过在同步的时候是需要授权提示的，记住密码很重要，（用户名是已经安装过的，安装的时候是记住用户名的。）
再点击同步就完成了，当然，前提是你重装系统前备份：X:\Users\Administrator\Music\iTunes\iTunes Media\Mobile Applications 这个文件夹里的所有文件，其中的X是你的itunes的安装盘符，一般是C盘。再次声明是你有备份，没有备份的没有办法实现。此文标题可能起的有点让人无解，能帮到您那就好，如果此文对您没有意义，请别拍砖。
给表格做链接
2010/01/07 17:08 | 分类：Javascript
<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>
IE6的bug的8个技巧
2009/12/30 15:09 | 分类：Css
1. 设置position: relative
将一个元素设置为”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 错误的使用这个值 /* } |
[CSS]贴在底部的布局
2009/12/03 16:00 | 分类：Css
对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。
那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用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>
[ 总结]浏览器兼容手册
2009/11/23 09:42 | 分类：Css
浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
全文阅读 »
强制Firefox显示滚动条
2009/11/19 13:32 | 分类：Css
我们知道，在页面高度不够时候，FF火狐浏览器是默认没有滚动条的。但是当页面在加载完了之后，如果页面够长，会出现稍微的闪动（偏移）。这里我们强制FF在开始的时候就有滚动条，这样，就不会出现那样的现象了。
其实，实现过程也不是很复杂，具体看例子：
< !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>
