五月
26

斯芬克斯之谜续——IE下失效的margin-left/right

作者:oneboys

margin-left/right也会失效?
一般很多人遇到的margin失效都是纵向上面的:
一种情况是元素的确不支持margin-top/bottom(参看:关于margin-top/bottom在inline元素(non-Replaced)上不起作用的解释);
另一种情况则是元素产生了margin叠加(参看:如何避开麻烦的margin叠加(margin collapsing))。

那么margin-left/right怎么又会失效的呢?假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋,就会了解了:哦,又是haslayout啊。

我们来看看具体的失效代码:

提示:您可以先修改部分代码再运行

我们会发现:.cont的margin:0 30px再IE下失效了。。。
好,既然说haslayout的问题,那么,我们知道,height属性会触发haslayout。去除.cont的height试试,果然margin-left/right起效了。
不过,不要急,我们可以消除触发子级元素的haslayout来解决失效,也可以给父级元素触发haslyout来解决这个问题:在.wrap上增加属性:zoom:1;
那么,所有谜团都在这里了吗?
我们试试,不改动其他属性,去除父级.wrap上的border。我们发现,margin-left/right也不会失效了…
(看来,border这个属性,还得多加研究啊。之前也遇到过类似border引起的问题的。。。)
haslayout的一点资料可以看这里:On having layout抄录

五月
2

JS实现字符unicode编码信息查询

作者:oneboys

   这两天在xiaonei的个人状态里看见很多人添加有一些特殊字符,如҉ (据说叫菊花,囧nz)。当然这种字符也还没什么稀奇,这个符号是cyrillic里百万的标识。另外有见到一个能将文字反排显示的不可见字符,比较有趣。如下:

提示:您可以先修改部分代码再运行

   此RLO字符的效果就是将文字反排(效果有点类似<bdo dir=rtl>啊。参见:HTML的dir属性和<bdo>标签及其他一些CSS文字排版属性、滤镜 不过bdo这个是需要浏览器解释后才能看见效果的,而此RLO不需要浏览器解释,当然上面代码里使用的是html字符实体编号,这个是需要浏览器解释的。)

   不论是什么字符,只要想在计算机上显示,都需要编入UCS(Unicode Character Set)当中。也就是说每个字符都有一个unicode编码——不过,拥有unicode码的不一定是字符,也可以是设备控制符。
   应该说,很多形式的字符编码都是基于unicode编码的,如URL-encode,ASCll码,HTML Character Entities编号。特别是HTML Character Entities编号,与unicode可以说是一一对应的,只要浏览器支持,charset包含,“&#”+十进制标号+“;”的编码就能在html中使用所有unicode中定义字符。
   以上面的RLO字符分析,虽然RLO符看不见,但也是可以被copy的,而且,必然的有一个对应的unicode码。RLO的unicode对应的16进制编号是:202e。转成10进制就是:8238。所以如果要在html中使用这个字符,除了copy这个字符过来外,我们可以使用字符实体编号:&#+8238+;(不包括+号)。
关于如何查到某个字符的unicode编码,每种程序语言应该都有函数可以用来解码为unicode,这里有一个php的解码应用:convert-to-html。这是直接解成html实体编码的。它同unicode的关系只是十进制与十六进制的关系(实质是一样的)。要看16进制unicode只需做下进制转码就行了。知道了16进制编码,我们就可以在这里查询字符的信息:unicode.org

下面推荐一下自己用js写的转码工具:
《========convert_characters_to_unicode=======》
可以解开任意字符的unicode码,并生成字符实体码,而且可以链接到unicode官网查询该字符的信息。
js中escape这个函数能直接将字符串转成unicode码,不过有部分属于ASCll编码的字符不会解开。
而charCodeAt函数则能解开任何字符的unicode码。
我的js中两种方法都用了。
JS中解码的函数还有encodeURI——这个解开的unicode码我们会经常看见,地址栏里的字符串即出自于此。

下面就是我写的js函数。——写的有点乱,不合理处肯定很多。

  1. function getId(idName)
  2. {
  3.   return document.getElementById(idName);
  4. }
  5.  
  6. function escapeCode(){
  7.     var hexArray=new Array();
  8.     var decArray=new Array();
  9.     var entiArray=new Array();
  10.     var decCode;
  11.     var inTXT=getId('inputValue').value;
  12.     var outTXT='';
  13.     var entityCode='';
  14.     var outList="<ul><li>Unicode Character Code编码</li><li>HTML Character Entities编号</li><li>字符显示</li><li>unicode信息查询</li></ul>";
  15.  
  16.     if(getId('convAll').checked){  //true,转换a-z,A-Z等字符的unicode编码
  17.       var character;
  18.       for(i=0;i<inTXT.length;i++){
  19.         character=inTXT.charCodeAt(i).toString(16).toUpperCase();   //法1:使用charCodeAt逐字转码
  20.         outTXT+='u'+character+' ';
  21.         hexArray.push(character);
  22.        }
  23.     }
  24.     else{
  25.     outTXT=escape(inTXT);               //法2:使用escape直接转码(不转a-z,A-Z等字符)
  26.     hexArray=outTXT.split(/%u|%/)//以%u和%做分割插入数组
  27.     }
  28.  
  29.     for(i in hexArray){
  30.         if(hexArray[i]=='') hexArray.splice(i,1); //清除空的数组项(FF)
  31.         hexArray[i]=hexArray[i].slice(0,4);     //截取数组项中前四个字符。(消除a-z,A-Z等不解码产生的影响)
  32.         decCode=parseInt(hexArray[i],16).toString(10);
  33.         decArray.push(decCode);
  34.         entityCode+='&#'+decCode+'; ';
  35.         outList+="<ul><li>"+hexArray[i]+"</li><li>"+decArray[i]+"</li><li>\"&#"+decCode+";\"</li>";
  36.         outList+="<li><form enctype='application/x-www-form-urlencoded' action='http://www.unicode.org/cgi-bin/Code2Chart.pl' method='post' target='_blank'>";
  37.         outList+="<input type='hidden'  maxlength='8' size='8' name='HexCode' value="+hexArray[i]+" />";
  38.         outList+="<input type='submit' value='Go' name='submit'/></form></li></ul>";
  39.     }
  40.         getId('outUnicode').value=outTXT;   //输出unicode码,以%u或%开头。
  41.         getId('outEnticode').value=entityCode//输出字符实体编码
  42.         getId('outView').innerHTML=outList//输出编码值,并有unicode信息查询链接。
  43.      }
四月
28

未知高度元素的垂直居中(js实现)

作者:oneboys

未知高度(即高度不确定)元素的垂直居中,虽说这个布局的实际应用不是很多,但在网上讨论的却很多,而且往往联系到某公司的招聘题。
之前有收集过几个纯CSS的做法:点这里
不过,当然没有用Js来做的简单明了啦。

提示:您可以先修改部分代码再运行

上面的垂直居中,是相对于整个屏幕来说的。如果是在某个div中垂直居中,方法也一样,稍微修改下就可以了。(是不是该写个通用的呢)

四月
28

搭建pligg的注意事项和几个程序修改

作者:oneboys

      新弄了一个digg类站:cssass的分享
      digg类程序以前有玩过国产的wodig,那是在其第三季的时候,那时bug很多,自己还给官方贡献过几个bug修改方法呢。弄了一段时间后,就被遗弃了。
      事隔一年有余,又想起digg类程序的好处来:聚合,分享,内容为王,民主推荐。
这回则找了几个国外程序来玩。首先是找了PHPDug,这个在一年前是和wodig做过对比选择的,当时还是0.7版,这个程序功能很简单,就是这个原因当时就选择了wodig,同样因为这个原因现在我拿他做首选。可惜,安装在服务器上却无法工作。(所谓的服务器,只虚拟主机耳。相信是主机系统之过也。)
      首选遭毙,第二选乃是据说有“digg类中的wordpress”之称的pligg。
     不过,也是问题重重,特别是对于我们中文环境下。
阅读全文 »

四月
14

HTML的dir属性和<bdo>标签及其他一些CSS文字排版属性、滤镜

作者:oneboys

先看一下HTML4.0中定义的dir属性.对应有两个值ltr(默认值)和rlt。分别表示文本从左向右显示(dir=ltr)和文本从右向左显示(dir=rtl)。
文本从右向左显示的情况(dir=rtl)是考虑到一些特殊的文字书写方式(如古中文,希伯来文——但是我们古中文可不止是从右到左,还是从上到下书写的呢)。
先看一下Test

提示:您可以先修改部分代码再运行

从这里看,觉得这和css的属性text-align:right,或则HTML中不推荐使用的属性align=right并没有什么区别啊。

这是因为受到了“各种用于语言编码的和显示的Unicode和ISO标准”的影响。整段文落都当成一个不可分割的整体了(不管是什么文字的)。
象数字和一些符号就能按空格分隔反排,体现出“从右向左”的显示:

提示:您可以先修改部分代码再运行

除此之外,这个属性还能在ie下改变滚动条的位置,你见过滚动条显示在滚动内容的左侧的吗?
用ie看看下面的效果吧:

提示:您可以先修改部分代码再运行

综上也可以看出,dir这个属性其实并不怎么好用。幸好我们也基本用不上这个属性。
要用我们也最好结合<bdo>这个标签来使用。

提示:您可以先修改部分代码再运行

<bdo>标签必须要带dir属性一起使用。他产生的效果就不论是什么文字字母符号,都以单个字符为单位,颠倒顺序,从右往左显示(我们可以称为“反排效果”),很彻底啊,我们可以看到,连连续书写的英文字母都被反写了。

现如今web标准化的春风吹遍大江南北,我们也要与时俱进,贯彻落实结构和表现分离的思想方针,加快发展可扩展性良好的web建设。
所以,除了语义化的结构外,我们还推荐将结构之外的表现用CSS属性来实现。
前面提到的html属性dir和标签所能达到的反排效果,我们也可以使用两个CSS标准属性来实现。
第一个CSS属性:direction : ltr | rtl | inherit ——效果对应HTML属性dir。
第二个CSS属性:unicode-bidi : normal | bidi-override | embed——其中的bidi-override属性值效果对应<bdo>标签。

提示:您可以先修改部分代码再运行

之前我们还说道古中文的写法并非只是单单的从右往左书写,同时也是由上往下书写的。那么有没有html属性或css属性能达到这个效果(可以称作文字竖排效果吧)呢?
css属性倒的确有,还不止一个。但很遗憾,都只是MS的推荐属性,并非W3C的标准属性。所以只有IE系列(ie5.5+)浏览器支持。
这两个属性分别是:
writing-mode : lr-tb | tb-rl ;
layout-flow : horizontal | vertical-ideographic ;

稍微演示一下

提示:您可以先修改部分代码再运行

个人觉得这两个属性,几乎没什么差别。。。
另外,当其高度不设定时。如何自适应的高度,很是令人迷惑。

再提一个不标准的东西——镜像翻转滤镜——只做了解,不建议使用。
前面我们有一个文字反排效果,那是排版上的。而使用这个滤镜呢,不单是排版上反过来了。连文字的显示都反过来了(镜像翻转效果)。——当然只支持ie系列(ie4+)。
滤镜有两个,一个是水平翻转滤镜:fliph。一个事垂直翻转滤镜flipv。
注:使用这个滤镜需要触发haslayout.

提示:您可以先修改部分代码再运行

提到这个翻转镜像效果,倒想起了自己之前的一个娱乐之作:重型7级absolute单层1像素真实web2.0渐变风格倒影字效果(全兼容)

文章到这里,我们已经提到了关于页面,文字排版相关的html属性,html标签,CSS属性以及CSS滤镜。除此之外,可以改变文字排版方式(文字反排)的还有一个RLO符。
请看:

提示:您可以先修改部分代码再运行

这个RLO符的unicode编码是:202E 。字符实体编号是:8238
可以参考这篇后文:JS实现字符unicode编码信息查询

最后,我们还要提一个由字体产生的文字侧倒的效果。
运行下如下代码:

提示:您可以先修改部分代码再运行

这个相信一些修改过QQ聊天字体的童鞋们也发现过,选择QQ聊天字体里这类前面带@符的字体就能打出侧倒的文字。
不过,这浏览器下显示,会有一些差异。比如FF下不支持,(我的)safari下不支持@宋体。
另外,还有些人反映自己的自己上根本没有效果。

四月
13

风云变幻

作者:oneboys

四月
8

日月在天,我与同辉

作者:oneboys

农历牛年三月十三,月御追日,东升西沉,遥相璀璨,同辉于天。闲人得见,抬手摄拍,寻处分享,上传于斯。

三月
21

如何避开麻烦的margin叠加(margin collapsing)

作者:oneboys

斯芬克斯——ie私有属性haslayout这篇文章中,我们提到的第一个斯芬克斯之迷,其实就是一个margin叠加问题。
关于margin collapsing,在W3C中是有明文规范的,符合其规则的都将产生margin collapsing。W3C认为margin叠加后的布局界面更良好。

margin collapsing(css2.1规范)
margin collapsing(css2规范)

margin叠加现象(父子级别):

提示:您可以先修改部分代码再运行

可以看出wrap未被子层的margin所撑开。

但是,这种margin叠加往往不是我们所想要的效果(一些人甚至将此称为一个bug:margin叠加bug,也有称高度不适应bug的)——平心而论,我们努力的要避开margin collapsing多少也有些违背了W3C的初衷。不过,由于ie下经常有意无意的会触发haslayout,从而会避开margin叠加,这使得浏览器间显示不一。因此,我们还是有理由在适当时候彻底避开margin叠加的。

那么,如何避免这种margin叠加现象呢?
阅读全文 »

三月
21

斯芬克斯之迷——ie私有属性haslayout的困扰

作者:oneboys

就象神话中的斯芬克斯一样,ie的私有属性haslayout是个神秘且让人困惑的难缠东西,她只游荡于ie(这片沙漠)之下。
她无法使用css声明直接创建。即便是对于ie,她也不能说是一个实实在在存在的属性。
ie下的元素有些本身拥有haslayout(基本上是一些拥有内在尺寸的可置换元素),有些可以通过一些css属性可以触发产生。

我们可以在ie developer toolbar上查看到到haslayout这个属性项,他的值是-1。这说明这个元素触发了layout。
详细haslayout资料:On having layout抄录
更详细资料:译文On having layout这篇文章本人还没怎么看,相信很多问题在这里都有解释

遇到斯芬克斯是件很麻烦的事情,她会给你提出很多怪怪的让人困惑的问题,更何况只要我们在ie沙漠中游荡的话,遇到的概率是非常高的。
遇到她,我们会有三种结果:
猜不出迷题的答案——我们会在迷失在困惑中;
猜错了迷题的答案——我们会误会很多东西;
猜对了迷题的答案——恭喜你,你就不用怕斯芬克斯这个丑婆娘了。

那让我们来猜一下她的几个比较困惑的问题吧。
阅读全文 »

三月
13

马赛克效果

作者:oneboys

之前有过一个很简单的马赛克应用

这里,结合快速蒙版等工具和滤镜做一个较复杂的效果。

cssabss.jpg

步骤: 阅读全文 »

 Page 1 of 9  1  2  3  4  5 » ...  Last » 
关闭
E-mail It