仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 885|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 给大家带来IE与FF不兼容网页结构CSS成绩

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:06:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你可以轻松地控制页面的布局。
  CSS网页结构中常常会呈现良多IE与FF不兼容成绩,上面收拾了一些罕见的大概及其办理的举措!
1、用!important办理IE和Mozilla的结构不同

  !important是CSS1就界说的语法,感化是进步指定款式划定规矩的使用优先权,最主要的一点是:IE一向都不撑持这个语法,而其他的扫瞄器都撑持。因而我们就能够使用这一点来分离给IE和其他扫瞄器分歧的款式界说,比方,我们界说如许一个款式:


.colortest{
border:20pxsolid#60A179!important;
border:20pxsolid#00F;
padding:30px;
width:300px;
}
  在Mozilla中扫瞄时分,可以了解!important的优先级,因而显现#60A179的色彩;在IE中扫瞄时分,不克不及够了解!important的优先级,因而显现#00F的色彩。

2、办理超链接会见事后hover款式不显现的成绩

  改动CSS属性的分列按次:前后按次尺度应为:
  a:link—a:visited—a:hover—a:active

3、Li中内容凌驾长度后以省略号显现的办法

<metacontent="text/html;charset=gb2312"http-equiv="Content-Type"/>
<styletype="text/css">
<!--
li{
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;}
--></style>
<ul>
<li><ahref="#">CSSWebDesign我爱CSS-Web尺度化-www.52CSS.com</a></li>
<li><ahref="#">web尺度罕见成绩年夜全-www.52CSS.com</a></li>
</ul>
4、margin和padding界说尺寸的缩写

  margin:3px——暗示一切边都是3px;
  margin:3px5px——暗示top和bottom的值是3px,right和left的值是5px
  margin:3px5px7px——暗示top的值是3,right和left的值是5,bottom的值是7
  margin:3px5px7px5px——四个值顺次暗示top,right,bottom,left;上右下左。

5、办理IE不克不及准确显现通明PNG——header内到场代码

<scriptlanguage="javascript">
functioncorrectPNG()
{
for(vari=0;i<document.images.length;i++)
{
varimg=document.images
varimgName=img.src.toUpperCase()
if(imgName.substring(imgName.length-3,imgName.length)=="PNG")
{
varimgID=(img.id)?"id="+img.id+"":""
varimgClass=(img.className)?"class="+img.className+"":""
varimgTitle=(img.title)?"title="+img.title+"":"title="+img.alt+""
varimgStyle="display:inline-block;"+img.style.cssText
if(img.align=="left")imgStyle="float:left;"+imgStyle
if(img.align=="right")imgStyle="float:right;"+imgStyle
if(img.parentElement.href)imgStyle="cursor:hand;"+imgStyle
varstrNewHTML="<span"+imgID+imgClass+imgTitle
+"style=""+"width:"+img.width+"px;height:"+img.height+"px;"+imgStyle+";"
+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+"(src="+img.src+",sizingMethod=scale);"></span>"
img.outerHTML=strNewHTML
i=i-1
}
}
}
window.attachEvent("onload",correctPNG);
</script>
6、ul在Firefox和IE下体现分歧

  利用(padding:0;margin:0;list-style:inside;)
  大概(padding:0;margin:0;list-style:none;)完成兼容

7、BOX模子在firefox和IE中的注释相差2px的办理办法

div{
margin:30px!important;
margin:28px;
}
  注重这两个margin的按次必定不克不及写反。依据下面提到的IE其实不撑持!important,以是在IE下实在注释成如许:

div{
maring:30px;
margin:28px
}
  反复界说的话依照最初一个来实行,以是不成以只写margin:XXpx!important;

8、margin的默许效果

  div里的内容,ie默许为居中,而ff默许为左对齐。使ff内容居中的办法是增添代码margin:auto;
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
第二个灵魂 该用户已被删除
沙发
发表于 2015-1-18 05:13:57 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
分手快乐 该用户已被删除
板凳
发表于 2015-1-22 11:49:53 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
蒙在股里 该用户已被删除
地板
发表于 2015-1-31 06:48:26 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
再现理想 该用户已被删除
5#
发表于 2015-2-6 18:16:25 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
山那边是海 该用户已被删除
6#
发表于 2015-2-18 04:23:42 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
若相依 该用户已被删除
7#
发表于 2015-3-6 01:53:51 | 只看该作者
可以使用 CSS 检查工具进行设计。
飘灵儿 该用户已被删除
8#
发表于 2015-3-12 19:55:00 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
愤怒的大鸟 该用户已被删除
9#
发表于 2015-3-20 02:40:58 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 23:24

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表