css FF与IE适配性总结

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

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

1. 超连接浏览之后hover款式就不出現的难题
被点一下浏览过的超连接款式不在具备hover和active了,许多人应当都遇到过这个难题,处理方式是更改CSS特性的排序次序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
2. FireFox下怎样使持续长字段全自动换行
大家都知道IE中立即应用 word-wrap:break-word 便可以了, FF中大家应用JS插进的方式来处理
Code:
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Js编码
<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>

3.ff下为何父器皿的高宽比不可以自融入
在子器皿加了波动特性后,该器皿将不可以全自动撑开,处理方式是在标识完毕后再加1个消除波动的元素。
Code:
clear:both;
4.IE6的双倍边距BUG
波动后原本外边距10px,但IE解释为20px,处理方法是再加
Code:
display: inline
5. IE6下肯定精准定位的器皿内文字没法一切正常挑选
此难题在IE6、7中存在,处理难题的方法是让IE进到到qurks mode。有关qurks mode的有关专业知识,请参照:
http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
6. IE6下照片正下方有时间隙造成
处理这个BUG的方式也是有许多,能够是更改html的排版,或设定img 为display:block
或设定vertical-align 特性为vertical-align:top | bottom |middle |text-bottom都可以以处理.
7. IE6下两个层正中间有空隙
这个IE的3PX BUG也是常常出現的,处理的方法是给.right也一样波动 float:left 或相对性IE6界定.left margin-right:⑶px;
8. list-style-image没法精确精准定位
list-style-image的精准定位难题也是常常有人问的,处理的方法1般是用li的情况仿真模拟,这里选用相对性精准定位的方式还可以处理。
9. LI中內容超出长度后以省略号显示信息的方式
此方式可用与IE与OP访问器
Code:
<style type="text/css">
<! --
li {
width: 200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
10.web规范中界定id与class有甚么差别吗
1.web规范中是不可许反复ID的,例如 div id="aa" 不可许反复2次,而class 界定的是类,基础理论上能够无尽反复, 这样必须数次引入的界定即可以 应用他.
2.特性的优先选择级难题
ID 的优先选择级要高于class,看上面的事例
3.便捷JS等顾客端脚本制作,假如在网页页面中要对某个目标开展脚本制作实际操作,那末能够给他界定1个ID,不然只能运用遍历网页页面元素再加特定特殊特性来寻找它,这是相对性消耗時间資源,远远比不上1个ID来得简易.
11.怎样竖直垂直居中文字
将元素高宽比和行高设为1致。
Code:
<style type="text/css">
<!--
div{
height:30px;
line-height:30px;
border:1px solid red
}
-->
</style>
12.怎样对齐文字与文字键入框
再加 vertical-align:middle;
Code:
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>
13.FF下面不可以水平垂直居中呢
FF下面设定器皿的上下外补钉为auto便可以了
Code:
<style type="text/css">
<!--
div{
margin:0 auto;
}
-->
</style>
14.FF下文字没法撑开器皿的高宽比
规范访问器中固定不动高宽比值的器皿是不容易象IE6里那样被撑开的,那我又想固定不动高宽比,又想能被撑开必须如何设定呢?方法便是去掉height设定min-height:200px; 这里以便照料不了解min-height的IE6 能够这样界定:
Code:
{
height:auto!important;
height:200px;
min-height:200px;
}
15.IE6下器皿的宽度和FF解释不一样呢
Code:
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div{
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
</style>
<div ōnclick="alert(this.offsetWidth)">web规范普遍难题大全</div>
难题的区别在于器皿的总体宽度有木有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那到底是如何致使的难题呢?大伙儿把器皿顶部的xml去掉就会发现原先难题出在这,顶部的声明开启了IE的qurks mode,有关qurks mode、standards mode的有关专业知识,请参照:
[url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true[/url]
16. 为何web规范中IE没法设定翻转条色调了
处理方法是将body换为html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar⑶dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
17. 为何我界定的款式沒有功效呢
这里你没法用.aa界定到li 遇到这类状况如何处理呢?回答是提升.aa 的优先选择权 例如#aa ul li.aa
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#aa ul li {
color:red
}
.aa {
color:blue
}
-->
</style>
<div id="aa">
<ul>
<li class="aa">
web规范普遍难题大全
</li>
</ul>
</div>
18. IE6没法界定1px上下高宽比的器皿
IE6下这个难题是由于默认设置的行高导致的,处理的方式也是有许多,比如:overflow:hidden | zoom:0.08 | line-height:1px
19. 情况色调没法显示信息
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
ul {
background:red
}
li {
float:left;
width:180px;
}
-->
</style>
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
<ul class="gainlayout">
<li>web规范普遍难题大全</li>
<li>web规范普遍难题大全</li>
<li>web规范普遍难题大全</li>
<li>web规范普遍难题大全</li>
<li>web规范普遍难题大全</li>
<div style="clear:both"></div>
</ul>
IE中设定有情况色的ul并沒有显示信息出来,这个属于haslayout难题,处理的方法也许多参照 http://www.satzansatz.de/cssd/onhavinglayout.htm
处理方式之1:
Code:
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
20. 如何才可以让层显示信息在FLASH之上呢
处理的方法是给FLASH设定全透明
Code:
<param name="wmode" value="transparent" />
21. 如何使1个层竖直垂直居中于访问器中
这里大家应用百分比肯定精准定位,与外补钉负值的方式,负值的尺寸为其本身宽度高宽比除以2
Code:
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:⑴00px 0 0 ⑴00px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
22. 照片竖直与器皿内
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:⑸0%;left:⑸0%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="logo.gif" /></p></div>
或应用情况图的方法:
Code:
background:url("logo.gif") center no-repeat;
23. 怎样让div横向排序
横向排序DIV可使用波动的方法例如float:left,或设定目标为内联,还能够肯定精准定位目标这些.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
float:left;
width:200px;
height:200px;
border:1px solid red
}
-->
</style>
<div>web规范普遍难题大全</div>
<div>web规范普遍难题大全</div>
<div>web规范普遍难题大全</div>
24 Firefox 有关DIV高宽比没法自融入的两种处理
假如设定了1个DIV的高宽比,当DIV里具体內容超过所设高宽比,ie会全自动拉伸以融入DIV器皿尺寸,ff会固定不动DIV的高宽比,超出一部分超过DIV底线之外,
出現和下面的內容重合的状况。假如不给DIV设定高宽比,在Firefox中将不回由于里边的內容而撑开,而IE中就会全自动依据內容撑开
处理计划方案:
1、在DIV內部的最终追加clear:both款式
<div style="background-color:#FF0000;">
<div style="float:left; height:200px">Jmedia Design</div>
<div style="float:right; height:800px">www.jmedia.cn</div>
<div style="clear:both"></div>
</div>

2、对DIV应用overflow:auto;
<div style="overflow:auto;">
<div style="float:left; background-color:#000000;height:200px">1111111111</div>
<div style="float:right;background-color:#000000; height:300px"">2222222222</div>
</div>