Pivot Code » IE6 http://www.pivotcode.com 欢迎来我的小思想绽放的地方…… Sun, 30 Oct 2011 13:37:24 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 IE6固定定位position属性fixed BUG http://www.pivotcode.com/ie6-position-fixed-bug/ http://www.pivotcode.com/ie6-position-fixed-bug/#comments Wed, 03 Mar 2010 04:53:25 +0000 Vidar Liu http://www.pivotcode.com/?p=430 当需要把一个元素永远固定在浏览器的一个位置的时候，那么就需要用到position的fixed属性。然后用top和left设置元素的位置。

这个效果也应用在人人网的个人首页底部的工具栏。

常去人人网的朋友肯定会发现，如果用IE6浏览器访问人人网的话，这个工具条以前是不存在的。后来，人人已经通过js实现此功能，但是它的效果和正常浏览器下访问是不同的，即每当拖动滚动条它就会隐藏，当停止时再出现。所以，值得肯定的是IE6不支持这个position的fixed属性。

这个问题也一直都在困扰着我，因为我一直都在想把这个效果实现在我的一个项目上，而又避开使用javascript。

后来在‘幸福收藏夹’博客，找到了解决方案——利用position:absolute定位在IE6下实现固定定位的效果，以下是实现原理：

fixed元素的绝对位置相对于HTML元素，滚动条则是基于body元素而不属于html元素。
当我们拖动滚动条滚动的时候，内容都会随窗口滚动，这时滚动的是body元素。HTML元素被浏览器判定为相对定位的根级元素，而我们定义的position:absolute元素也在HTLML元素当中，属于HTML元素的子元素。因此我们所定义的absolute元素会根据HTML元素的大小而进行绝对定位。如果我们未曾对HTML元素设置样式的情况下，它的大小是随内容的大小而变的,这样一来如果我们在其中使用绝对定位，并不能实现我们想得到的固定定位的效果。因此我们需要给我们需要绝对定位元素的相对定位盒模型指定一个绝对大小，即窗口当前的大小。但是body元素仍需保持其原有大小，否则就没有滚动条了。这时我们需要将超出HTML元素的内容隐藏掉，就可以让HTML元素永远保持在一个固定大小了。

代码如下：

html{overflow:hidden;} // Important（必须）。
body{overflow:auto;height:100%}

代码规定了html将只有当前窗口的大小，溢出的内容隐藏。但是body仍会随高度自动变化。于是我们就可以利用position:absolute来把元素固定在窗口任意位置了。例如仿人人网定位元素在底边：

示例的完整代码：

<!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=utf-8" />
<title>ie6-position-fixed-bug</title>
<style>
* {
	padding:0;
	margin:0;
}
html{_overflow:hidden;}/*IE6hack,必须*/
body{height:100%;overflow:auto;}
#footer .bottom {
	width:580px;
	height:20px;
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	_position:absolute;/*IE6hack,必须*/
	bottom:0;
	left:50%;
	margin-left:-290px;
}
</style>
</head>
<body>
<div>
<h1>测试定位</h1>
占位文字
</div>
<div id="footer">
  <div class="bottom"></div>
</div>
</body>
</html>

注：本文参考自幸福收藏夹

相关日志

]]> http://www.pivotcode.com/ie6-position-fixed-bug/feed/ 3 体验篇：Microsoft Expression Web 3 SuperPreview全攻略 http://www.pivotcode.com/microsoft-expression-web-3-superpreview/ http://www.pivotcode.com/microsoft-expression-web-3-superpreview/#comments Sat, 27 Feb 2010 14:09:05 +0000 Vidar Liu http://www.pivotcode.com/?p=363

这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

牢骚发过了，现在来看看这款软件给我们带来的革命吧！

如果您还没有下载，点击这里下载Microsoft Expression Web 3 SuperPreview（官方地址）

如果您已下载成功，那么跟我一起开始把它安装到自己的电脑里面吧！（高手绕路）

首先运行刚刚下载好的文件，运行后会出现如下步骤：

step1：License agreement 许可协议，当然是点Accept接受了

setp2: Installation 安装，点击options会出现如下图所示的更改路径界面，默认是c:\Program Files\Microsoft Expression（我习惯性吧应用程序放D盘,因此我这里显示的是d:\Program Files\Microsoft Expression），您也可以选择自己喜欢的安装路径。选择好安装路径后，点击install。

step3、安装等待……

step4、安装成功后的感谢界面，下面有个按钮View release notes查看发行声明，点击会到微软官方的说明网站，这里选择Finish按钮，完成。

这样就把Super Preview安装到电脑了，现在点击桌面的图标开始体验吧！

打开等待界面……

之所以放上这个安装步骤，其实主要原因是我很喜欢它的UI（用户界面），毕竟使用这个软件的人都是前端工程师，都是对审美有需求的，自然我也不例外，其实微软近期发布的新产品UI都全换成类似于这样的了，例如Office2010,毕竟是有影响力的企业，UI总是有我们可以借鉴的地方，比如配色，构图等等。一个好的设计师并不是天生的，而是用时间和经验还有欣赏所积累的。

接下来，就是我们的SuperPreview窗口了。

如此，您看到的便是期待的、传说的、神秘的Microsoft Expression Web 3 SuperPreview整个界面了。可能它并不像我们想像的那样完美，比如它会看起来更像是浏览器，可惜，它不是，而是更像一个类似于图形图像软件的页面调试工具，正如它的界面所传达的信息一样，它会把我们将调试的网页生成一张全览图，类似于Adobe公司的browserlab。

不过值得庆幸的是，它也并没有那么糟糕，虽然我们看到的是一张我们网页的全览图，但是它会生成我们布局中所用到的任何一个元素位置，然后通过一个类似于FireBug的选择工具来选取我们想了解的元素，并且点击它会显示这个元素的大小、左边的距离值，和顶部的距离值，这样我们就可以通过左右对比来判断在IE6和IE8下布局中元素的布局差别了。

如图所示，这是此网站在superpreview下的IE6（左）和IE8（右）的对比，我用鼠标选择了导航的首页按钮（当选择任意一边时，另一边会同时选择），然后会同事在对比窗口左下角显示这个元素的信息，其中两侧数据不同的地方，信息位置会把差异值显示成红色。

点击界面右下角的DOM（Document Object Model文档对象模型）按钮，可以在界面下方弹起一个类似于FireBug的调试窗口，并显示出在对应浏览器下所有的元素（如果使用了判断注释，例如[if IE6]那么在IE8下将不显示其中的DOM）。和选择图中的元素一样，当点击任何一边的标签时，右侧的标签便会一起选中，并显示其数值。

其它功能

在界面顶部是SuperPreview软件的功能区，从左向右依次是：

1.1、Selection Model选择器，快捷键（V）（通过它选择任何想得到的界面中元素）

1.2、Panning Model拖动，快捷键（H）（拖动界面视图到需要的位置，拖动任意一方，另一方会一起移动到相同位置）

2.1、凸显方式:Box highLighting Model圈中元素，快捷键（L）（如上图样式）

2.2、凸显方式：Light-Out highlighting Model高亮元素,快捷键（L）（下图样式）

3.1、Toggle ruler visiblity切换标尺可见性，快捷键（R）（点击打开和关闭边缘的标尺）

3.2、Toggle thumbnail visiblity切换缩略图可见性，快捷键（T）（点击会在窗口右下角显示一小条网页的全景缩略图）

3.3、Toggle guide visiblity切换指示的可见性，快捷键（Ctrl+；）（没用出效果）

4.1、Vertical Split Layout垂直分割布局，快捷键（A）（上面截图所呈现的布局样式）

4.2、Horizontal Split Layout水平分割布局，快捷键（S）（上下显示布局）

4.3、Overlay Layout覆盖布局，快捷键（D）（重合显示两个窗口中的网页）

4.4、Single Layout单一布局，快捷键（F）（显示其中一个页面，然后通过下侧的tab切换当前显示）

5.1、地址栏

5.2、路径选择按钮

5.3、刷新

6、缩放比例（可以从中选择，也可以选中更改，还可以拖动鼠标实现缩放）

7、帮助

顶部的功能栏，到这里就介绍完了，如此整个软件介绍也差不多就是这些了，不过还有一个强大的功能，那就是底部的tab。

底部tab是显示的当前正在调试的网页，类似于我们浏览器的tab，但是如果这么想那就错了，仔细看：

如图所示，最左侧是我打开的IE6窗口，右侧依次是IE8和IE7，发现右侧右下方的加好了么，点击那个的话，如果我们新建立的是IE6窗口，那么最左侧的IE6会并合到右侧的tab里和IE8、7并列显示。自然，如果在左侧新建IE7的话，那么右侧并列显示的IE6就会跑到左侧Tab了。

另外一个细节是在软件右下角有个调整分辨率的选择器，通过它可以选择不同分辨率下我们要测试网页的显示效果。

好了，那么讲到这里就是我发觉到SuperPreview这个软件全部的功能了，如果您发觉到我没有发现的更好的功能，欢迎留言指出，或提供分享。谢谢！

不足：

任何东西都不会完美，这个软件虽然带给我们很大的便利，但是它还是存在一些令人讨厌的体验。

1、网页打开速度很慢

2、如果新建tab的话，它不会独立加载显示新建tab的页面，而是让我们刷新全部打开的tab。

3、只能针对一个网站测试

4、不能时时更改，类似于FireBug的功能

5、调试Javascript就更别想咯……

因此，虽然有了SuperPreview，但是我们还是不能摆脱安装古典浏览器的命运。希望微软能再改进改进吧！

谢谢观赏！

相关日志

]]> http://www.pivotcode.com/microsoft-expression-web-3-superpreview/feed/ 4 css文字阴影 http://www.pivotcode.com/css-text-shadow/ http://www.pivotcode.com/css-text-shadow/#comments Sun, 07 Feb 2010 02:47:34 +0000 Vidar Liu http://mingsenliu.com/?p=221 CSS Attribute ：text-shadow

近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。

而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。
text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。
此属性基本写法：

text-shadow:[颜色 x轴 y轴 模糊半径]

x,y轴控制阴影的偏移位置
颜色代表阴影的颜色
模糊半径可以控制阴影的模糊与不模糊

另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如：

text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]

(注：safari4.0后才支持多层阴影)

示例：

text-shadow:black 2px 2px 0

DEMO

那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。

IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！

对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现：

filter: dropshadow(OffX=1, OffY=1, Color='#f5f5f5', Positive='true')

OffX对应text-shadow属性的X轴
OffY对应text-shadow属性的y轴
Color对应text-shadow属性的颜色
Positive设置为true就可以了

欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow

ok，现在可以放心的使用文字阴影来实现你想要的效果了。

相关日志

]]> http://www.pivotcode.com/css-text-shadow/feed/ 0 IE6下图像的最大宽度 http://www.pivotcode.com/ie6-img-max-widht/ http://www.pivotcode.com/ie6-img-max-widht/#comments Sun, 27 Dec 2009 09:10:01 +0000 Vidar Liu http://mingsenliu.com/?p=177 图像如果显示在一个限制了宽度的div容器中时，图像有多大，它便会显示多大,当布局小于图像大小时便会产生溢出。同样的问题在table容器中一样。

那么你会说可以在CSS中定义布局中图像的宽度。那么如果图像小于布局的宽度时，图像便会被拉伸变形。那么有什么好的办法让这个图像即不会溢出，又能保持它原来的大小呢？这个时候我们可以用CSS的max-width方法来限制图像的最大宽度解决这个问题，具体用法就是:

.layout{width:600px;}
.layout img{max-width:600px;height:auto;}/*如果不希望图片会因为限制宽度而变形的话，那么把高度设置为自适应*/

如此，问题解决，但是并不是所有问题都解决了，浏览器兼容性是永远都是前段工程师的噩梦，因为该死的IE6并不对这个属性提供支持。所以我们不得不针对IE6做一些处理。接下来就是只有IE支持的属性值：expression

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

用法是expression(statement),例如我们上面的CSS，我们需要在规则中加入

.layout{width:600px;}
.layout img{max-width:600px;width:expression(this.width > 600 ? 600: true);height:auto;}/*this是指当前元素‘.’操作符中文代表中文意义的‘的’,width字面翻译宽度，后面是三元判断表达式，意思是说当img的宽度大于600时，img的宽等于600，否则不进行任何操作*/

相关日志

]]> http://www.pivotcode.com/ie6-img-max-widht/feed/ 0 也谈IE6下block元素float多出文字BUG http://www.pivotcode.com/ie-6-overflow-element/ http://www.pivotcode.com/ie-6-overflow-element/#comments Tue, 01 Dec 2009 06:28:17 +0000 Vidar Liu http://mingsenliu.com/?p=113 最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。

我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。

但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。

我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。

【css部分】

@charset "utf-8";
/* CSS Document */
ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/
ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/
ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/
 
/*分别定义需要的列span元素的宽度*/
ul li span.listOne{width:300px;}
ul li span.listTwo{width:200px;}
ul li span.listThr{width:100px;}
ul li span.listFou{width:100px;}
ul li span.listFiv{width:100px;}

【html部分】

 
 
 
 
 
 
<ul>
 
	<li>
<span>帖子列表</span>
<span>帖子分类</span>
<span>发布者</span>
<span>最后回复</span>
<span>发布时间</span></li>
 
 
	<li>
<span><a href="#">这里是帖子标题</a></span>
<span><a href="#">这里是帖子分类</a></span>
<span><a href="#">发布者姓名</a></span>
<span>回复者姓名</span>
<span>2009-10-10 20：10</span></li>
 
</ul>

这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示

overflow

代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。

以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：

“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”

另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决

相关日志

]]> http://www.pivotcode.com/ie-6-overflow-element/feed/ 4