12种CSS BUG处理方式与技能

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

1、 对于访问器的挑选器
  这些挑选器在你必须对于某款访问器开展css设计方案时将十分有效.
  IE6及其更低版本号,本文由52CSS.com梳理,转载请注明出处!
  * 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 {}
  要应用这些挑选器,请将它们放在款式以前. 比如:
Example Source Code
#content-box {
width: 300px;
height: 150px;
}
Example Source Code
* html #content-box {
width: 250px;
}
2、让IE6适用PNG全透明
  1个IE6的Bug引发了大不便, 他不适用全透明的PNG照片。
  你必须应用1个css滤镜
Example Source Code
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
3、移除超连接的虚线
  FireFox下,当你点一下1个超连接时会出外围出現1个虚线轮廊. 这很非常容易处理, 只必须在标识款式中添加:本文由52CSS.com梳理,转载请注明出处!
Example Source Code
outline:none.
a{
outline: none;
}
4、给行内元素界定宽度
  假如你给1个行内元素界定宽度,那末它只是在IE6下合理. 全部的HTML元素要末是行内元素要末就好是块元素. 行内元素包含: <span>, <a>, <strong> 和 <em>. 块元素包含<div>, <p>, <h1>, <form>和<li> . 你不可以界定行内元素的宽度, 以便处理这个难题你能够将行内元素变化为块元素.
Example Source Code
span { width: 150px; display: block }
5、让固定不动宽度的网页页面垂直居中
  以便让网页页面在访问器垂直居中显示信息, 必须相对性精准定位外层div, 随后把margin设定为auto.
Example Source Code
#wrapper {
margin: auto;
position: relative;
}
6、IE6双倍边距的bug
 
7、Box Model 盒实体模型bug的1般处理方法
 
8、两个层之间的3px空隙
9、在IE中的HTML注解引发文本怪异的拷贝
10、照片更换技术性
  用文本总比用照片做题目好1些. 文本对显示屏阅读文章机和SEO全是十分友善的.
Example Source Code
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: ⑸000px;
}
  你能够看到大家对题目应用了规范的<h1>做为标识而且用css来将文字更换为照片. text-indent特性将文本推到了访问器左侧5000px处, 这样针对访问者来讲就看看不到了.
  关闭css,随后看看头顶部会是甚么模样的.本文由52CSS.com梳理,转载请注明出处!
101、 最少宽度
  IE6此外1个bug便是它不适用 min-width 特性. min-width又是非常有效的, 非常是针对延展性模版来讲, 它们有1个100%的宽度,min-width 能够告知访问器什么时候就不必再缩小宽度了.
除IE6之外全部的访问器你只必须1个 min-width: Xpx; 比如:
Example Source Code
.container {
min-width:300px;
}
  以便让他在IE6下工作中, 大家必须1些附加的工作中. 刚开始的情况下大家必须建立两个div, 1个包括另外一个:
Example Source Code
<div class="container">
<div class="holder">Content</div>
</div>
  随后你必须界定外层div的min-width特性,本文由52CSS.com梳理,转载请注明出处!
Example Source Code
.container {
min-width:300px;
}
这时候该是IE hack大展身手的情况下了. 你必须包括以下的编码:
Example Source Code
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: ⑶00px;
}
  As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
102、掩藏水平翻转条
  以便防止出現水平翻转条, 在body里添加 overflow-x:hidden .
Example Source Code
body { overflow-x: hidden; }
  当你决策应用1个比访问器对话框大的照片或flash时, 这个技能将十分有效