时光博客 - WEB开发中的可用性和用户体验
全部文章

IE6中的min-width一般解决方法

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-31

上次翻译的一篇文章How to Use CSS to Solve min-width Problems in Internet Explorer中已经找到了非JavaScript和css expression 实现ie中的min-width。

这次我们看看CSS expression的实现方法：

  1. #content{   
  2. _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');   
  3. }  

这里的 

  1. ((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

只是个判定条件，判定页面body的宽度，如果页面body的宽度小于700（这个要根据具体的页面来指定），就把content的宽度指定为600，否则就让它自适应宽度。这里的content宽度，可以根据自己的情况来设定。

3309 次阅读，已有 1 人留下评论   |  Tags: css, ie, expression, min-width

[译]min-width的跨浏览器兼容解决方法

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-30

项目中用到min-width，找了很多解决方案，都不管用，上蓝色经典问了些高人。版主推荐了一篇国外技术文章，觉得价值比较大，就翻译一下，收藏起来。英文比较差，如果翻译有错，还请指正。

介绍
min-width这个属性除了IE6，以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的css hack!
对网页设计人员来说，缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止，唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法（间接的JavaScript）.经过几个小时的尝试，我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度，但我相信这是一个很小的代价，一个非 JavaScript方法工程跨浏览器（甚至在Mac IE5）

方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法，对IE提供他独特的风格（我会解释一下教程）

The Css

  1. body {  
  2.  background:#fff url(rule.gif) 20px 0;  
  3.  color:#000;  
  4.  font-family:"trebuchet ms", "times new roman", times, serif;  
  5.  margin:20px;  
  6.  padding:0;  
  7. }  
  8. .width {  
  9.  width:50%;  
  10.  min-width:300px;  
  11.  background:#fff;  
  12. }  
  13.  
  14. .content {  
  15.  border:1px solid #c00;  
  16.  padding:5px;  
  17. }  
  18.  
  19. .rule {  
  20.  width:300px;  
  21.  background:#c00;  
  22.  color:#fff;  
  23.  margin:1em 0;  
  24. } 
阅读全文  |   3582 次阅读，已有 3 人留下评论   |  Tags: min-width, hack, css, cross, browers

《防火墙5788》插曲-擦肩而过mp3

Posted by Kevin | Filed under Tools/share | 2009-01-29

该剧是一部以IT商战悬疑为故事线索、讲述一群年青人在城市里通过自身努力实现人生价值的故事。预计于2007年底杀青，之后在北京投入后期制作，08年春节后即可成片。

青梅竹马的舒蓉与贝志诚遭遇了前所未有的事业挫折，他们即将上市的舒诚公司屡遭背后黑手暗算。舒蓉的办公室被人闯了空门，对方直冲“上市计划”而来，虽然没有得手，却暴露出公司内部已有“间谍”。寻找深藏不漏的内奸，应付接踵而至的突发事件，加快公司的上市步伐，舒蓉和贝志诚忙得不可开交。然而事情的头绪却越理越多，更加令人费解。

在公司上市的紧要关头，贝志诚突然莫名其妙的发了水灾，电线短路。一个重要的程序必须在这天完成交给客户，贝志诚只好抱着未完成的硬盘四处寻找网吧。路上，贝志诚无意中遇到了来京投奔好友的宋玉秀，贝志诚好心载了玉秀一程，却不想玉秀下车后，贝的硬盘数据丢失了嫌疑落在了玉秀遗落的箱子上，贝志诚怀疑玉秀的身份与黑客有关，与舒蓉一同进行追查。此时，丢失箱子的玉秀心急如焚，在网上高价拍卖所失箱子里的宝贝。

正当贝志诚为黑客的事情绞尽脑汁的时候，在自己的家里以外的发现了摄像头，电脑被顶尖黑客入侵，一切来的神不知鬼不觉。对方还光明正大的在网络上挑衅，真正高手间的较量开始了。同时，贝志诚和玉秀这对欢喜冤家也展开了他们之间的“较量”。

舒蓉的助手张倩发现内奸，但她却没有把真相告诉舒蓉，而是拿着公司的上市计划跟对方谈交换条件。舒蓉得知暗算舒诚集团的幕后黑手是自己的初恋情人，公司高薪聘请的“海龟”佟俊竟然是对手的拜把兄弟。舒诚集团陷入了对手精心布置的局，同时，一段恩怨纠缠的陈年往事也浮出水面。

舒诚集团步步小心，最终却还是走进了圈套。对手以人质为要挟，贝志诚手中的股份成了决定舒诚集团命运的关键。贝志诚不知该如何取舍，舒蓉却在第一时间从容做出了决定。意想不到的是，佟浚在关键时刻轻松使出杀手锏....... 

阅读全文  |   5426 次阅读，已有 7 人留下评论   |  Tags: 擦肩而过, 防火墙, mp3, 下载

Browers Meta Tag X-UA-Compatib...

Posted by Kevin | Filed under HTML/CSS/JS | 2009-01-29

打开浏览器查看liupeng.us的页面源代码，细心的朋友会发现meta信息里面多了个tag标签

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <meta http-equiv="Content-Language" content="utf-8" /> 
  6. <meta http-equiv="x-ua-compatible" content="IE=7" /> 
  7. <meta http-equiv="Pragma" content="no-cache" /> 
  8. <meta content="关注WEB标准,用户体验,关注前端技术,网页设计师,前端开发工程师,liupeng,Beijing China" name="keywords" /> 
  9. <meta content="关注WEB标准,用户体验,关注前端技术,网页设计师,前端开发工程师,liupeng,Beijing China" name="description" /> 
  10. <meta content="SaBlog" name="copyright" /> 

里面多了一句

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />  

X-UA-Compatible 是什么？

看看MSDN上的资料说明：

In IE8 Beta 1, that option is the “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. However, the scenario this doesn’t address is when IE=7 is applied as an HTTP header to a site that contains Quirks mode pages. The IE=7 HTTP header will force all pages – both Quirks and Standards – to display in IE7 Standards mode. Developers using this header while updating their sites would then have to add the “IE=5” <META> tag to each page they want to keep in Quirks mode. This logic is fine for many websites. However, if a site has lots of Quirks mode pages, or for the case where pages with frames host a mix of Strict and Quirks mode content – as brought to light by IE8 Beta 1 user feedback – the compatibility opt-out adds a bit more work than we intended.

主要意思我总结一下：

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。

目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" /> 

这样我们才能使得页面在IE8里面表现正常！

 

参考资料：Introducing IE=EmulateIE7

3426 次阅读，已有 4 人留下评论   |  Tags: browers, meta, tag, x-ua-compatible

欢迎大家加入立方网社区

Posted by Kevin | Filed under Life/Story | 2009-01-20

立方网 www.l99.com 是一个在线社区，通过它您可以记录人生旅程，可以与朋友、同学、同事、家人保持更紧密的联系，及时了解他们的动态；与他们分享您的照片、心情、快乐。现立 方网在全国范围内招募推广大使：只要您是立方网的一员并且热爱立方网。通过立方网 “邀请好友”功能邀请您的好友加入立方网，认识我们网站。我们将为您开通QQ红钻贵族、QQ黄钻贵族、QQ绿钻贵族、QQ蓝钻贵族、地下城与勇士DNF黑 钻等...接受这份挑战，成长、辉煌、分享！立方网和您一路同行！

阅读全文  |   3351 次阅读，已有 8 人留下评论   |  Tags: l99, lifeix, station

JSP课程设计-个人网上银行

Posted by Kevin | Filed under Works | 2009-01-19

大四上学期学习了jsp动态语言，期末的时候老师要求做课程设计。要求使用mvc框架开发，于是选择了基于structs的BitsWork开发，说明一下bitswork不是什么知名的java框架，是我们学习的那本书所在的公司开发的，一个小型的框架。

考虑到是课程设计的形式化，没必要设计得那么好。当时选了课题为个人网上银行，根据要求完成了所有的功能。功能相当简单，页面设计稍稍美化了下，不过对于应付课程设计足足有余了。在这里公开的目的仅仅是为了方面以后的学弟学妹们，没时间做课设的。交这个给老师就可以了。

阅读全文  |   4685 次阅读，已有 16 人留下评论   |  Tags: jsp, java, bitswork, mvc, olbank

时光记忆-2009年博客新模板

Posted by Kevin | Filed under Life/Story | 2009-01-16

大家也许能看出来，电影《我的女友是机器人》，对我影响很深。可能是个人情节吧，在电影中或多或少找到了心灵的归宿。因为看了，这个电影，所以我在博客里面大肆宣传它；因为看了这个电影，我去百度回答了一些关于这个电影里面的一些问题和提高了一些视觉资源；还是因为这个电影，最终让我制作出了这个皮肤。

制作过程中曲曲折折，中间夹杂着生产实习，都是抽了零碎时间整理出来的。制作这个皮肤的过程中又对页面元素的架构，复用，属性的优化巩固了不少。这款皮肤中加入了不少人性化元素，都是以前从未尝试过的。这款皮肤里面有我对时光网的崇拜以及电影给我的持久感到。

明天就回家了，想想心里有点高兴也有点失落，高兴的是，马上可以回家看看爸爸妈妈了，因为我比较粗心也不会说话，所以平时很少打电话回家，希望这次回去能够好好照顾爸爸妈妈，帮忙做家务活。失落的是，2008年已经过去了，我却没有达到自己想要的目标，同学们也这么跟我说的。不过没关系，2009年，我们一起加油，一起共勉，希望能实现自己的梦想和价值。

已经凌晨3:30了，希望会有个好梦！

3291 次阅读，已有 15 人留下评论   |  Tags: sablog, template, mtime, 2009
Total:124« First‹ Prev678910111213Next ›Last »