Chrome下Flash无法输入中文-转载

这个问题主要出现在当flash设置了wmode属性之后,在上述非主流非IE 内核的浏览器中便无法输入中文。究其原因是因为Flash这种模式很少用到,这是一种无窗口模式,绘制和输入取决于浏览器,这种模式对于Flash来说, 绘制效率比较低,但是可以作为HTML的层来使用,并支持透明,因此在国内还是挺常用的。在天书中使用这个,主要是为了支持鼠标右键。

由于这种模式Flash控件接收的输入来自浏览器,因此需要浏览器对Flash的wmode特殊处理。

很不幸的是,除了IE对Flash ActiveX的wmode下的透明绘制和中文输入处理的很完美,别的浏览器都支持的很差。有的甚至连透明都绘制成一片黑色,就一个简单的IME输入,都 懒得解决。比如Firefox论坛上,这个问题从若干年前就被人发现了,一直无人修改,不光中文,所有依赖于IME的输入都不行,包括欧洲一些国家的输入 法。

天书用过两个解决方案

1. 页面上放置一个html的textfield,AS封装一个TextField,通过AS和JS通讯,在需要输入的时候把这个输入框挪过去。

优点:支持各种输入法,支持输入框右键

缺点:不够优雅,AS和JS互通迅,JS加载失败则没戏

2. 实现一个带中文输入法的TextField,用这个框替代所有的TextField

优点:干净优雅,不容易出错,兼容性好

缺点:只支持自己实现的输入法,易用性差

天书最后采用的是方案二,出于可靠性考虑,毕竟非主流浏览器用户很少,提供了方法就行了。

window 模式

默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这 是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透 明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的 深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。

按钮在 IE 中两边被拉伸的 BUG -转

大家在写按钮(input、button)的时候会发现在 IE 下:

  1. 随着字数的增多,两边的间距也会越来越大。
  2. 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。

到底是什么原因呢?

蓝色理想WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案

1、IE 在按钮的 value 值每增加 4 个字节(汉字为 2 个)时,就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮(XP 风格)默认样式是一个固定尺寸的圆角矩形图片作背景,所以一旦按钮变宽变高后,这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决,除非 WIN 系统自己修复 BUG ,但对于第一个问题 ,我们还是可以修复的。

IE 下给按钮元素设置 overflow 属性的 visible 值(注 :padding 值仅在设置了overflow:visible 属性后才有效),这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后,发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中,虽然按钮显示正确了,但是原先预留的宽度大小却没有改变,仍然占据着空间,需要在 IE6 中设置按钮的宽度(width)为 0(IE7同样也存在此 BUG,但暂时没有寻找到好的方式解决)。

最终的修复代码如下(Demo):

input.button {
    padding: 0 .25em;
    width: auto;
    _width: 0;
    overflow:visible !ie;
}

前端 JavaScript 相关的小Tips-转载

Quirks模式与Standards模式-转载

如何进入Standards模式?

一般来讲浏览器是通过DTD来判断模式的;浏览器进入Standards模式的DTD有:HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

  • strict去掉了许多表现的标签,有利于结构和表现的分离
  • loose会导致Firefox进入Almost Standards模式,在图片的处理上会有微小的差别

在IE6下,如果在DTD之前有任何字符都将导致其进入quirks模式

Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
可设置百分比的高度
在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:

body{text-align:center};#{content:text-align:left}
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
许多CSS默认样式将不同
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
JavaScript中的区别
Quirks mode的Table of measurements

参考

dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat,分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()
页数 1 2 3 4 5 6 7 8 9 ...21 22 23 24 下一页