仓酷云
标题:
来谈谈:12种CSS BUG办理办法与技能
[打印本页]
作者:
萌萌妈妈
时间:
2015-1-15 23:33
标题:
来谈谈:12种CSS BUG办理办法与技能
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
CSSbug是结构中最头疼的成绩。我们必要分身各类扫瞄器,以等候取得分歧的效果。十分遗憾的是各厂商之间的合作招致良多成绩的存在。而IE6与IE7在良多成绩上也存在着很年夜的不同。轻松的办理CSSbug是我们必需把握的妙技。如今收拾出最经常使用的12种CSSBUG办理办法和CSSBUG类的小技能。
1、针对扫瞄器的选择器
这些选择器在你必要针对某款扫瞄器举行css计划时将十分有效.
*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;
}
www.52css.com]
*html#content-box{
width:250px;
}
您也能够参考―CSShacks:扫瞄器特定选择器先容
http://www.52css.com/article.asp?id=635
2、让IE6撑持PNG通明
一个IE6的Bug引发了年夜贫苦,他不撑持通明的PNG图片。
你必要利用一个css滤镜
.52css.com]
*html#image-style{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png",sizingMethod="scale");
}
3、移除超链接的虚线
FireFox下,当你点击一个超链接时会在核心呈现一个虚线表面.这很简单办理,只必要在标签款式中到场:本文由52CSS.com收拾,转载请说明出处!
.com]
outline:none.
a{
outline:none;
}
您也能够参考―除链接元素的虚线框(兼容IE7、IE6、FF)
http://www.52css.com/article.asp?id=743
4、给行内元素界说宽度
假如你给一个行内元素界说宽度,那末它只是在IE6下无效.一切的HTML元素要末是行内元素要末就好是块元素.行内元素包含:<span>,<a>,<strong>和<em>.块元素包含<div>,<p>,<h1>,<form>和<li>.你不克不及界说行内元素的宽度,为懂得决这个成绩你能够将行内元素变化为块元素.
span{width:150px;display:block}
5、让流动宽度的页面居中
为了让页面在扫瞄器居中显现,必要绝对定位外层div,然后把margin设置为auto.
[www.52css.com]
#wrapper{
margin:auto;
position:relative;
}
6、IE6双倍边距的bug
给此工具加上display:inline便可办理成绩。详细先容:
http://www.52css.com/article.asp?id=144
7、BoxModel盒模子bug的一样平常办理举措
这是一个臭名远扬的成绩了,概况参考这里:
http://www.52css.com/article.asp?id=106
8、两个层之间的3px间隙
传说中的“IE3pxbug”,办理的举措:
http://www.52css.com/article.asp?id=146
9、在IE中的HTML正文引发笔墨奇异的复制
DuplicateCharactersBug很奇妙,详细的办理举措:
http://www.52css.com/article.asp?id=440
10、图片交换手艺
用笔墨总比用图片做题目好一些.笔墨对屏幕浏览机和SEO都长短常友爱的.
<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处,如许关于扫瞄者来讲就看不见了.
11、最小宽度
IE6别的一个bug就是它不撑持min-width属性.min-width又是相称有效的,出格是关于弹性模板来讲,它们有一个100%的宽度,min-width能够告知扫瞄器什么时候就不要再紧缩宽度了.
除IE6之外一切的扫瞄器你只必要一个min-width:Xpx;比方:
.52css.com]
.container{
min-width:300px;
}
为了让他在IE6下事情,我们必要一些分外的事情.入手下手的时分我们必要创立两个div,一个包括另外一个:
.52css.com]
<divclass="container">
<divclass="holder">Content</div>
</div>
然后你必要界说外层div的min-width属性,本文由52CSS.com收拾,转载请说明出处!
.52css.com]
.container{
min-width:300px;
}
这时候该是IEhack大显神通的时分了.你必要包括以下的代码:
.52css.com]
*html.container{
border-right:300pxsolid#FFF;
}
*html.holder{
display:inline-block;
position:relative;
margin-right:-300px;
}
12、埋没程度转动条
为了不呈现程度转动条,在body里到场overflow-x:hidden.
body{overflow-x:hidden;}
当你决意利用一个比扫瞄器窗口年夜的图片大概flash时,这个技能将十分有效.
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
作者:
仓酷云
时间:
2015-1-17 23:14
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
作者:
第二个灵魂
时间:
2015-1-24 12:43
滚动条)层属性--溢出(visible/hidden/scroll/auto)
作者:
活着的死人
时间:
2015-2-1 16:20
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者:
爱飞
时间:
2015-2-7 09:53
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者:
山那边是海
时间:
2015-2-21 21:58
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
作者:
老尸
时间:
2015-3-6 22:48
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
作者:
兰色精灵
时间:
2015-3-13 23:08
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
作者:
小妖女
时间:
2015-3-20 22:54
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2