仓酷云

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

[DIV+CSS] 给大家带来CSS BUG办理办法和CSS BUG类的小技能

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

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

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

x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
CSSbug是结构中最头疼的成绩。我们必要分身各类扫瞄器,以等候取得分歧的效果。十分遗憾的是各厂商之间的合作招致良多成绩的存在。而IE6与IE7在良多成绩上也存在着很年夜的不同。在poluoluo.com大批的手艺文档中,也包括了这方面的内容。轻松的办理CSSbug是我们必需把握的妙技。如今收拾出最经常使用的12种CSSBUG办理办法和CSSBUG类的小技能。但愿对您的进修、事情有所匡助,假如您仍然有疑问,接待您到poluoluo.com查阅、搜刮相干内容。

1、针对扫瞄器的选择器

  这些选择器在你必要针对某款扫瞄器举行css计划时将十分有效.
  IE6及其更低版本
  *html{}
  IE7及其更低版本
  *:first-child+html{}*html{}
  仅针对IE7
  *:first-child+html{}
  IE7和今世扫瞄器
  html>body{}
  仅今世扫瞄器(IE7不合用)
  html>/**/body{}
  Opera9及其更低版本
  html:first-child{}
  Safari
  html[xmlns*=""]body:last-child{}
  要利用这些选择器,请将它们放在款式之前.比方:

#content-box{
width:300px;
height:150px;
}
*html#content-box{
width:250px;
}
  您也能够参考—CSShacks:扫瞄器特定选择器先容

2、让IE6撑持PNG通明

  一个IE6的Bug引发了年夜贫苦,他不撑持通明的PNG图片。
  你必要利用一个css滤镜

*html#image-style{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png",sizingMethod="scale");
}
3、移除超链接的虚线

  FireFox下,当你点击一个超链接时会在核心呈现一个虚线表面.这很简单办理,只必要在标签款式中到场:

outline:none.
a{
outline:none;
}
  您也能够参考—除链接元素的虚线框(兼容IE7、IE6、FF)

4、给行内元素界说宽度

  假如你给一个行内元素界说宽度,那末它只是在IE6下无效.一切的HTML元素要末是行内元素要末就好是块元素.行内元素包含:<span>,<a>,<strong>和<em>.块元素包含<div>,<p>,<h1>,<form>和<li>.你不克不及界说行内元素的宽度,为懂得决这个成绩你能够将行内元素变化为块元素.

span{width:150px;display:block}
5、让流动宽度的页面居中

  为了让页面在扫瞄器居中显现,必要绝对定位外层div,然后把margin设置为auto.

#wrapper{
margin:auto;
position:relative;
}
6、IE6双倍边距的bug

  给此工具加上display:inline便可办理成绩。详细先容:

7、BoxModel盒模子bug的一样平常办理举措


8、两个层之间的3px间隙

  传说中的“IE3pxbug”,办理的举措:

9、在IE中的HTML正文引发笔墨奇异的复制

  DuplicateCharactersBug很奇妙。

10、图片交换手艺

  用笔墨总比用图片做题目好一些.笔墨对屏幕浏览机和SEO都长短常友爱的.

HTML:
<h1><span>Mainheadingone</span></h1>
CSS:
h1{background:url(heading-image.gif)no-repeat;}
h1span{
position:absolute;
text-indent:-5000px;
}
  你能够看到我们对题目利用了尺度的<h1>作为标签而且用css来将文本交换为图片.text-indent属性将笔墨推到了扫瞄器右边5000px处,如许关于扫瞄者来讲就看不见了.
  关失落css,然后看看头部会是甚么模样的.本文由poluoluo.com收拾,转载请说明出处!

11、最小宽度

  IE6别的一个bug就是它不撑持min-width属性.min-width又是相称有效的,出格是关于弹性模板来讲,它们有一个100%的宽度,min-width能够告知扫瞄器什么时候就不要再紧缩宽度了.
除IE6之外一切的扫瞄器你只必要一个min-width:Xpx;比方:

.container{
min-width:300px;
}
  为了让他在IE6下事情,我们必要一些分外的事情.入手下手的时分我们必要创立两个div,一个包括另外一个:

<divclass="container">
<divclass="holder">Content</div>
</div>
  然后你必要界说外层div的min-width属性,本文由poluoluo.com收拾,转载请说明出处!

.container{
min-width:300px;
}
这时候该是IEhack大显神通的时分了.你必要包括以下的代码:

*html.container{
border-right:300pxsolid#FFF;
}
*html.holder{
display:inline-block;
position:relative;
margin-right:-300px;
}
  Asthebrowserwindowisresizedtheouterdivwidthreducestosuituntilitshrinkstotheborderwidth,atwhichpointitwillnotshrinkanyfurther.Theholderdivfollowssuitandalsostopsshrinking.Theouterdivborderwidthbecomestheminimumwidthoftheinnerdiv.

12、埋没程度转动条

  为了不呈现程度转动条,在body里到场overflow-x:hidden.

body{overflow-x:hidden;}
  当你决意利用一个比扫瞄器窗口年夜的图片大概Flash时,这个技能将十分有效.
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
山那边是海 该用户已被删除
沙发
发表于 2015-1-18 05:31:15 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
不帅 该用户已被删除
板凳
发表于 2015-1-25 15:42:54 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
精灵巫婆 该用户已被删除
地板
 楼主| 发表于 2015-2-3 05:51:19 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
第二个灵魂 该用户已被删除
5#
发表于 2015-2-8 20:27:52 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
谁可相欹 该用户已被删除
6#
发表于 2015-2-26 06:09:20 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
变相怪杰 该用户已被删除
7#
发表于 2015-3-8 12:38:04 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
小魔女 该用户已被删除
8#
发表于 2015-3-16 02:15:49 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
金色的骷髅 该用户已被删除
9#
发表于 2015-3-22 19:09:40 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 02:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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