dg5461

1、DIV被FLASH INPUT SELECT挡住

在网页制作中,经常会遇到DIV层被Flash、input、select等控件遮住一部分的现象。
这时单单用z-index属性根本毫无作用。
以下是几种解决方法——

方法一:
对于Flash控件,在<object>中增加属性<param name="wmode" value="opaque">或<param name="wmode" value="transparent">即可。

opaque和transparent基本上差不多,只是在某些特殊情况下有点不同。
opaque在flash中需要用到输入法时输入法软件会定位不准。
transparent在同一页面中用得太多的话会有性能问题。

参考文章:
  Flash content and z-index
  Z-Index and Flash

方法二:
对于input或select等表单控件,可以通过把DIV的内容放入iframe或object里来解决。

方法三:
方法二如果用不好有可能会破坏页面的结构,互动性不大好。

还有另一种方法,
虽说DIV直接盖不住select,
但是DIV可以盖iframe,而iframe可以盖select,
所以,把一个iframe用来当作DIV的底,
这个DIV就可以盖住select了

 

关于字母自动换行问题

用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:(
总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。
table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)
注释一下:
1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

 

关于透明PNG在IE中正确显示问题

用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。查了一些资料,基本解决了这一问题,准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜

引用内容
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。


了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):

引用内容

#div1 {
    height: 600px;
    width: 260px;
    padding: 20px;
    background-repeat: repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"

}


这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的

修改:

 *html #div1 {
    height: 600px;
    width: 260px;
    padding: 20px;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"

}  /*这是IE认识的*/

html>body #div1{

 

 height: 600px;
    width: 260px;
    padding: 20px;
    background-repeat: no-repeat;  
    background:url(images/bgT.png);
}   /*这是FF认识的*/


分类:

技术点:

相关文章: