CSS技巧：
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如:<#div id=”imfloat”> 相应的css为 #IamFloat{float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元 素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，
如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，
可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令 在IE上也能用，可以把一个
#container{ min-width: 600px; width:e-xpression (document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；
但第2行的width使用了 Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px; border:1px solid #E00;}
#left{ float:left; width:50%;border:1px solid #E00;}
#right{ width:50%;border:1px solid #E00;}
*html #left{ margin-right:-3px; //这句是关键}
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div>这里的NOTfloatC并不希望继续平移，而是希望往下排。
(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，
否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，
这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容.
例如某一个wrapper如下定义:.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上
class="clearfix" 即可,屡试不爽. /* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; } /* Hide from IE Mac */
.clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */
或者这样设置：
.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
p对象中的内容
12. Why is there a gap under the image under IE6?
There are many ways to solve this BUG. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute. Vertical-align:top | bottom |middle |text-bottom can be solved.
13. How to align text and text input box
Add vertical-align:middle;
14. Defined in web standards Is there any difference between id and class?
1. Web standards do not allow repeated IDs. For example, div does not allow to be repeated twice, while class defines a class and can theoretically be repeated infinitely. This requires multiple times. You can use it by referencing the definition.
2. Attribute priority issue ID has a higher priority than class, see the example above
3. Convenient for client scripts such as JS, if If you want to perform a script operation on an object in the page, you can define an ID for it. Otherwise, you can only find it by traversing the page elements and specifying specific attributes. This is a relative waste of time and resources.
Far away Far simpler than an ID.
15. Method of displaying ellipsis after the content in LI exceeds the length
This method is applicable to IE and OP browsers
16. Why can’t IE set the scroll bar color in web standards?
The solution is to replace the body with html
17. Why can’t I define a container I with a height of about 1px?
This problem under E6 is caused by the default row height. There are also solutions Many, for example: overflow:hidden | zoom:0.08 | line-height:1px
18. How can I make the layer display on top of FLASH?
The solution is to set transparency for FLASH
19. How to vertically center a layer in the browser
Here we use percentage absolute positioning and the method of outer patch negative value, The size of the negative value is its own width and height divided by two
4. Cursor finger cursor
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be displayed in IE
5. UL's padding and margin
The ul tag has padding value by default in FF, but in IE only margin has a value by default, so defining ul{margin:0;padding:0;} first can solve the problem Most of the problems
6. FORM tag
This tag will automatically have some margins in IE, while in FF the margin is 0, so if you want to display it consistently, so It is best to specify margin and padding in css. To address the above two problems, I usually use this style
in my css. ul,form{margin:0;padding:0;} is defined. , so you won’t have this headache later.
7. Inconsistency in BOX model interpretation
The BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference. Solution: div{margin: 30px!important;margin:28px;} Note that the order of these two margins must not be reversed. IE cannot recognize the important attribute,
but other browsers can. So it is actually interpreted like this under IE: If div {maring:30px;margin:28px} is repeatedly defined, it will be executed according to the last one, so you cannot just write margin:xx px!important; :600px; //for ie6.0- width:500px; //for ff ie6.0} #box{ width:600px!important //for ff width:600px; //for ff ie6.0 width /**/:500px; //for ie6.0-}
8. Attribute selector (this is not compatible, it is a bug in hiding css)
p[id]{}div[ id]{} This is hidden for IE6.0 and versions below IE6.0, and works with FF and OPera. There is still a difference between attribute selectors and sub-selectors. The scope of sub-selectors is reduced in form. Attribute selectors The range is relatively large,
For example, in p[id], all p tags with id are of the same style.
9. The most ruthless method - !important;
If there is really no way to solve some detailed problems, you can use this method. FF will automatically parse "!important" first, but IE will ignore it.
As follows .tabd1{ background:url(/res /images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that xxxx !important This sentence is placed above another sentence, which has been mentioned above
10. IE, FF’s default value problem
Maybe you have been complaining about why you have to write different CSS specifically for IE and FF , why is IE such a headache, and then while writing css, I curse that abominable M$ IE. In fact, in terms of standard support for css, IE is not as terrible as we thought
Abominable, the key lies in IE and The default values of FF are just different. Once you master this technique, you will find that it is not that difficult to write CSS that is compatible with FF and IE. Maybe for simple CSS, you can completely eliminate the "!important" thing. We all know
that when a browser displays a web page, it will decide how to display it based on the css style sheet of the web page, but we may not necessarily describe all the elements in the style sheet in detail. Of course, there is no need to do that, so for those
attributes that have no description, the browser will use the built-in default method to display, such as text. If you do not specify a color in css, the browser will use Black or system color is used to display the background of div or other elements. If it is not specified in css,
the browser will set it to white or transparent, and so on for other undefined styles. So the fundamental reason why many things are displayed differently between FF and IE is that their default displays are different. How to display this default style? I know whether there are corresponding standards in w3
, so Don't blame IE for this.
11. Why the text in FF cannot expand the height of the container
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;
这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }
12.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决
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); /* ]]> */
13.为什么IE6下容器的宽度和FF解释不同呢
and FF interprets it as 220PX. So what exactly causes the problem? ? If you remove the xml at the top of the container, you will find that the original problem lies here. The statement at the top triggers IE's qurks mode. For knowledge about qurks mode and standards mode, please refer to: http: //www .microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true
IE6,IE7,FF IE7.0 is out, and there are new problems with CSS support. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article: Now I mostly use !important to hack, for IE6 and Firefox The test can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! The following is the compatibility collection of the three browsers.
2010-5-29 03:40 Reply
?Xi
3 fans
7 Floor
The first method is CSS HACK height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ Note order. This is also a CSS HACK, but it is not as simple as the above. #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ * html #example { color: #999; } /* IE7 */
In IE7 --> ; ; Filter method, the following is a classic translation from a foreign website. . Create a new css style as follows: #item { width: 200px; height: 200px; background: red; } Create a new div, and use the previously defined css style: Performance in body Add the lang attribute here, the Chinese is zh:
Now define another style for the div element: *:lang(en) #item{ background:green !important; } This is for use! important overwrites the original css style. Since the :lang selector is not supported by IE7.0, it will not have any effect on this sentence. Therefore, the same effect under IE6.0 is achieved, but unfortunately, Safari This attribute is also not supported, so you need to add the following css style: #item:empty { background: green !important } : The empty selector is a css3 specification. Although Safari does not support this specification, this element will still be selected regardless of whether This element exists and will now appear green on all browsers except Internet Explorer. For compatibility with IE6 and FF, you can consider the previous !important. Personally, I prefer to use
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
