css兼容问题

兼容问题

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定.即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

3. 横向上的内容撑破容器问题。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。

4.浮动的清除,ff下必须清除浮动clear:both。

5. double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

6.margin bug.当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件。解决方案:外层元素设定border 或设定float。

7.吞吃现象.还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

9.img下的留白,大家看这段代码有啥问题:

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,给img设定 display:block可以解决。

10去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

11接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

12链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

13block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff下正常。

14无法彻底清除的float。解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)

15ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

16.e6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

17.e6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

18.下的bug,<head></head>内有<base target=”_blank”/>的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

19.f的缺点。width:100%在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。

20.iE6的问题。当层的高度小于20px时,IE6下要定义font-size:0px;否则高度为20px;

21.ff下,只有body和html同时定义height:100%,高度才为100%。IE下只需要定义body.

22.div的垂直居中问题:

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行.

23. IE捉迷藏的问题

  当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

  有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

24.么web标准中IE无法设置滚动条颜色了

  解决办法是将body换成html

25.链接(a标签)的边框与背景

  a链接加边框和背景色,需设置 display: block,

26..ul标签在ff中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
  就能解决大部分问题

27.ff: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

ff: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

28.tu片居中,文字居左的写法。

.abc{ text-align:left }

abc img{ display:block ; text-align:center;margin:o auto; }

29.层垂直居中的样式:

div{

position:absolute;

top:50%;

left:50%;

margin:-117px 0 0 -187px;

width:374px;

height:234px;

background-image:url(images/beijing.jpg);

}

30.form在IE6里面底下会多出来一行,加上style="padding:0; margin:0;">

32.空td显示边框 table { border-collapse:collapse; }

33.鼠标经过图片变化图片

function imagechange(img)

{

document.images[0].src=img;

document.images[0].width=400;

document.images[0].height=300;

}

</script>

</head>

<body>

<a href="#" onmouseout="imagechange('images1.jpg')" onmousemove="imagechange('images2.jpg')"><img src="data:images2.jpg" width="400" height="300" /></a>

</body>

34.表单输入框默认文字的设置

function cleanUp(id){

if(document.getElementById("userid").value == "请输入搜索关键字")

{

document.getElementById(id).value = "";

}

}

<input class="inp" id="userid" name="userid" type="text" value="请输入搜索关键字" onclick="cleanUp('userid');" />

35.图片透明兼容写法:

filter:alpha(opacity=70);-moz-opacity:0.7;

36 文字和图片在同一行垂直居中问题:

一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了

兼容性一直都是个令人头痛的问题,下面简单总结火狐与IE的兼容性问题。

如果掌握了以下24个问题,那基本上所有的网页制作面试题都难不倒

1. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

1. <style type="text/css">
2. <!--
3. a:link {}
4. a:visited {}
5. a:hover {}
6. a:active {}
7. -->
8. </style>

2. FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决

1. <style type="text/css">
2. <!--
3. div {
4. width:300px;
5. word-wrap:break-word;
6. border:1px solid red;
7. }
8. -->
9. </style>
10.<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
11.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
12.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
13.aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Js代码

1. <scrīpt type="text/javascrīpt">
2. /* <![CDATA[ */
3. function toBreakWord(el, intLen){
4. var ōbj=document.getElementById(el);
5. var strContent=obj.innerHTML;
6. var strTemp="";
7. while(strContent.length>intLen){
8. strTemp+=strContent.substr(0,intLen)+"
9. ";
10. strContent=strContent.substr(intLen,strContent.length);
11. }
12. strTemp+="
13."+strContent;
14. obj.innerHTML=strTemp;
15. }
16. if(document.getElementById && !document.all) toBreakWord("ff", 37);
17. /* ]]> */
18. </script>

3.ff下为什么父容器的高度不能自适应
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。

1. clear:both;

4.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上

1. display: inline

5. IE6下绝对定位的容器内文本无法正常选择
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:
http://www.microsoft.com/..

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:-3px;

8. list-style-image无法准确定位
list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

9. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器

1. <style type="text/css">
2. <! --
3. li {
4. width: 200px;
5. white-space:nowrap;
6. text-overflow:ellipsis;
7. -o-text-overflow:ellipsis;
8. overflow: hidden;
9. }
10. -->
11.</style>

10.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以 使用他.
二.属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

11.如何垂直居中文本
将元素高度和行高设为一致。

1. <style type="text/css">
2. <!--
3. div{
4. height:30px;
5. line-height:30px;
6. border:1px solid red
7. }
8. -->
9. </style>

12.如何对齐文本与文本输入框
加上 vertical-align:middle;

1. <style type="text/css">
2. <!--
3. input {
4. width:200px;
5. height:30px;
6. border:1px solid red;
7. vertical-align:middle;
8. }
9. -->
10.</style>
11.

13.FF下面不能水平居中呢
FF下面设置容器的左右外补丁为auto就可以了

1. <style type="text/css">
2. <!--
3. div{
4. margin:0 auto;
5. }
6. -->
7. </style>

14.FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

1. {
2. height:auto!important;
3. height:200px;
4. min-height:200px;
5. }

15.IE6下容器的宽度和FF解释不同呢

1. <?xml version="1.0" encoding="gb2312"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4. <style type="text/css">
5. <!--
6. div{
7. cursor:pointer;
8. width:200px;
9. height:200px;
10. border:10px solid red
11. }
12. -->
13. </style>
14.<div ōnclick="alert(this.offsetWidth)">web标准常见问题大全</div>

问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:
http://www.microsoft.com/..

16. 为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. <!--
5. html {
6. scrollbar-face-color:#f6f6f6;
7. scrollbar-highlight-color:#fff;
8. scrollbar-shadow-color:#eeeeee;
9. scrollbar-3dlight-color:#eeeeee;
10. scrollbar-arrow-color:#000;
11. scrollbar-track-color:#fff;
12. scrollbar-darkshadow-color:#fff;
13. }
14.-->
15.</style>

17. 为什么我定义的样式没有作用呢
这里你无法用.aa定义到li 遇到这种情况怎么解决呢?答案是提高.aa 的优先权 比如#aa ul li.aa

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. <!--
5. #aa ul li {
6. color:red
7. }
8. .aa {
9. color:blue
10. }
11. -->
12.</style>
13.<div id="aa">
14.<ul>
15.<li class="aa">
16. web标准常见问题大全
17.</li>
18.</ul>
19.</div>

18. IE6无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

1. overflow:hidden zoom:0.08 line-height:1px

19. 背景颜色无法显示

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. <!--
5. ul {
6. background:red
7. }
8. li {
9. float:left;
10. width:180px;
11. }
12.-->
13.</style>
14.<!--[if lte IE 6]>
15.<style>
16..gainlayout { height: 1px; }
17.</style>
18.<![endif]-->
19.<ul class="gainlayout">
20.<li>web标准常见问题大全</li>
21.<li>web标准常见问题大全</li>
22.<li>web标准常见问题大全</li>
23.<li>web标准常见问题大全</li>
24.<li>web标准常见问题大全</li>
25.<div style="clear:both"></div>
26.</ul>

IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm
解决方法之一:

1. <!--[if lte IE 6]>
2. <style>
3. .gainlayout { height: 1px; }
4. </style>
5. <![endif]-->
6. <!--[if lte IE 6]>
7. <style>
8. .gainlayout { height: 1px; }
9. </style>
10.<![endif]-->

20. 怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明

1. <param name="wmode" value="transparent" />

21. 怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

1. <style type="text/css">
2. <!--
3. div {
4. position:absolute;
5. top:50%;
6. left:50%;
7. margin:-100px 0 0 -100px;
8. width:200px;
9. height:200px;
10. border:1px solid red;
11. }
12.-->
13.</style>

22. 图片垂直与容器内

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <style type="text/css">
3. <!--
4. * {margin:0;padding:0}
5. div {
6. width:500px;
7. height:500px;
8. border:1px solid #ccc;
9. overflow:hidden;
10. position:relative;
11. display:table-cell;
12. text-align:center;
13. vertical-align:middle
14. }
15.div p {
16. position:static;
17. +position:absolute;
18. top:50%
19. }
20.img {
21. position:static;
22. +position:relative;
23. top:-50%;left:-50%;
24. width:276px;
25. height:110px
26. }
27.-->
28.</style>
29.<div><p><img src="logo.gif" /></p></div>

或者使用背景图的办法:

1. background:url("logo.gif") center no-repeat;

23. 如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3. <style type="text/css">
4. <!--
5. div {
6. float:left;
7. width:200px;
8. height:200px;
9. border:1px solid red
10. }
11.-->
12.</style>
13.<div>web标准常见问题大全</div>
14.<div>web标准常见问题大全</div>
15.
16.
17.<div>web标准常见问题大全</div>

24 Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的高度,超过部分超出DIV底线以外,
出现和下面的内容重叠的现象。如果不给DIV设置高度,在Firefox中将不回因为里面的内容而撑开,而IE中就会自动根据内容撑开
解决方案:
1、在DIV内部的最后追加clear:both样式

1. <div style="background-color:#FF0000;">
2. <div style="float:left; height:200px">Jmedia Design</div>
3. <div style="float:right; height:800px">www.jmedia.cn</div>
4. <div style="clear:both"></div>
5. </div>

2、对DIV使用overflow:auto;

1. <div style="overflow:auto;">
2. <div style="float:left; background-color:#000000;height:200px">1111111111</div>
3. <div style="float:right;background-color:#000000; height:300px"">2222222222</div>
4. </div>

1 ie6.0横向margin加倍

产生因素:块属性、float、有横向margin。
解决方法:display:inline;
2 ie6.0下默认有行高

解决方法:overflow:hidden;或font-size:0;或line-height:xx px;
3 在各个浏览器下img有空隙(原因是:回车。)

解决方法:让图片浮动。
4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。

解决方法:a 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>}
b 父标签添加{overflow:hidden;}
c 给父标签设置高度
5 Ie6下,不识别最大宽、高度和最小宽高度,意即min-width/height和 Max-width/height在ie6中没效果,

解决方法:(1):.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2):.abc{width:200px;height:200px;_width:200px;_height:200px;}(因为ie6有一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。)
6 Ie6里面:如li设宽、高,并且li里面的标签浮动,那么li之间会有间距

解决方法:li不设宽、高或者li内的标签不浮动
7 li之间有间距

解决方法:li 设置vertical-align:middle;
8 3像素问题:ie6下,当浮动元素与流动元素并列显示时,他们之间会存在三像素问题。

解决方法:用hack技术, 例如:所有浏览器通用 height:100px;
ie6专用_height:100px;
ie7专用*+height:100px;
ie6/ie7共用*height:100px;
9 当定义行内元素为包含框时,且包含框包含的绝对定位元素以百分比为单位进行定位时,会出现混乱。

解决方法:在行内元素里加入{zoom:1;}
10 当多个浮动元素中间夹杂着HTML注释语句时,如果浮动元素宽度为100%,则在下一行多显示一个上一行最后一个字符。

解决办法:给浮动元素添加display:inline;。
11 opacity 定义元素的不透明度

filter:alpha(opacity=80);/*ie支持该属性*/
opacity:0.8;/*支持css3的浏览器*/
12 两个块元素,竖向的margin值不增加,会重叠,其间距为最大margin值。

13 优先级:被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中,!important不起作用。

14 火狐不识别background-position-y 或background-position-x;

---------------------------2014.01.10补充-------------------------------

15 ie6 不支持 fixed

复制代码
/*对于非IE6可以这样写*/
#top{
position:fixed;
bottom:0;
right:20px;
}

/*但是IE6是不支持fixed定位的,需要另外重写*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*使用hack使IE6实现该效果,但这个东东会闪烁,需要以下代码*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

/*使固定在顶部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}
复制代码
16 解决 ie6 最大、最小宽高 hack方法

复制代码
/* 最小宽度 */
.min_width{
min-width:300px;
_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大宽度 */
.max_width{
max-width:600px;
_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
min-height:200px;
_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
max-height:400px;
_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
复制代码

17 z-index不起作用的 bug

1)ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签含有浮动(float)属性。
2)所有浏览器:它只认第一个爸爸
层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。

18 ie各个版本hack

复制代码
/*类内部hack:*/
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/

/*选择器Hack:*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/

CSS-对于IE的兼容问题处理的更多相关文章

  1. IE10 CSS hack,IE兼容问题

    IE10 CSS hack,IE兼容问题 作者: 雪影 发表于2013 年 4 月 25 日 分类:技术分享 | 暂无评论 | 人气: 376 度 首先,ie10不支持条件注释了. 方法一:特性检测: ...

  2. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  3. 纯css实现省略号,兼容火狐,IE9,chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML+CSS布局技巧及兼容问题【阅读季】

    在IE6和IE7中,行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线. IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了 边框 ...

  5. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  6. css中的一些兼容问题

    浏览器兼容 为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正 ...

  7. 细微之处:比较两种CSS清除浮动的兼容

    http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...

  8. 怎么用一行代码解决CSS各种IE各种兼容问题

    用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...

  9. 解决CSS各种IE各种兼容问题(Google解决方案)

    google的 ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准 ...

  10. 浮出层的css写法,完美兼容IE6~10

    利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: <div class="poptip"> <span cla ...

随机推荐

  1. Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决

    问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...

  2. js快速排序算法

    真正的快速排序算法一: function quickSort(array){ function sort(prev, numsize){ var nonius = prev; var j = nums ...

  3. C语言 · 猜算式

    题目:猜算式 看下面的算式: □□ x □□ = □□ x □□□ 它表示:两个两位数相乘等于一个两位数乘以一个三位数. 如果没有限定条件,这样的例子很多. 但目前的限定是:这9个方块,表示1~9的9 ...

  4. 【转】IT大牛博客

    原文:http://blog.csdn.net/qq1175421841/article/details/49384841 首届中国最受欢迎50大技术博客获奖名单如下: 第一名:李会军  http:/ ...

  5. Direct3D 11 Tutorial 4: 3D Spaces_Direct3D 11 教程4:3D空间

    概述 在上一个教程中,我们在应用程序窗口的中心成功渲染了一个三角形. 我们没有太注意我们在顶点缓冲区中拾取的顶点位置. 在本教程中,我们将深入研究3D位置和转换的细节. 本教程的结果将是渲染到屏幕的3 ...

  6. C++笔试面试题整理

    朋友给出的一些常见的C++面试题,特整理如下,后期遇到新的再更新. 面试题 列举并解释C++中的四种运算符转化,说明它们的不同点: static_cast: 在功能上基本上与C风格的类型转换一样强大, ...

  7. python设计模式之猴子补丁模式

    1.所有书中都没有把猴子补丁作为一种设计模式来看待.因为设计模式的模式的命名是根据java中提炼出来的,语言方式决定了java绝对不会有也不需要有这种操作,不存在的.那自然设计模式不会包括猴子补丁模式 ...

  8. 【GIS】Mapbox-json配置

    1.json的MIME配置 application/json 问题:客户端浏览器不接受 MIME 类型的请求页面

  9. 【中间件安全】IIS6安全加固规范

    1. 适用情况 适用于使用IIS6进行部署的Web网站. 2. 技能要求 熟悉IIS配置操作,能够利用IIS进行建站,并能针对站点使用IIS进行安全加固. 3. 前置条件 1. 根据站点开放端口.进程 ...

  10. My google script which based on Google Sheet and Form

    My google script which based on Google Sheet and Form // get sheet data function getSpreadsheetData( ...