div CSS browser compatibility issues (IE6.0, IE7.0, ie8, FireFox...) 4_html/css_WEB-ITnose

Features related to compatibility of IE6, IE7, FF

CSS HACK Code: Common to all browsers height: 100px;

For IE6 _height: 100px; powered by 25175.net

For IE6 *height: 100px;

For IE7 * height: 100px;

Shared by IE7 and FF height: 100px !important (priority); 1. CSS HACK The following two methods can solve almost all HACKs today.

1 , !important (not very recommended, it feels safest to use one of the following)

With IE7’s support for !important, the !important method is now only for IE6’s HACK. (Pay attention to the writing. Remember the declaration position Need to advance.)

Code: #wrapper { width: 100px!important; /* IE7 FF */ width: 80px; /* IE6 */ }

2, IE6/IE77 for FireFox

* html and *html It is a tag unique to IE and is not supported by Firefox. And *html is a tag unique to IE7.

Code: #wrapper { width: 120px; } /* FireFox * / *html #wrapper { width: 80px;} /* ie6 fixed */ * html #wrapper { width: 60px;} /* ie7 fixed, pay attention to the order*/

Note: * html HACK for IE7 must ensure the following statement at the top of the HTML:

Code:

2. Universal float closure (very important!) You can use this to solve multiple problems The spacing when aligning divs is wrong.

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup] Add the following code to Global CSS and add class=" clearfix", it works repeatedly.

Code: /* 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 */ </style&gt ;

3. Other compatibility tips (quite useful)

1. Setting padding on a div in FF will cause the width and height to increase, but IE will not. (can be solved with !important) 2, centering problem. 1). Vertically centered. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content.) 2). Horizontally Centered. margin: 0 auto; (of course not universal) 3. If you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags) 4. FF and IE are suitable for BOX The difference in understanding leads to a difference of 2px. There are also problems such as the margin of a div set to float doubling under IE. 5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary Trouble. (Common in navigation tags and content lists) 6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptability. 7. Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:

Compatible code: hack’s most recommended mode. /* FF */ .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right : 12px; } /* IE6 */ *html .submitbutton { margin-top: 21px; } /* IE7 */ * html . submitbutton { margin-top: 21px; }

What is Browser HACK: When we use different browsers (Firefox IE7 IE6 ) When visiting the same website or page, there will be some incompatibility problems. Some are displayed normally and some are displayed abnormally. We will be very annoyed when writing CSS. We have just fixed this browser problem. , but a new problem occurred in another browser. HACK is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!

The compatibility of the IE7 browser recently released by Microsoft has indeed placed a heavy burden on some web page developers. Although IE7 has become standardized, there are still many differences from FF, so IE7 needs to be used HACK, many friends have asked what the HACK of IE7 is, but I actually don’t know either. I haven't found a specific HACK for IE7 yet. In addition to the previous article, the hack method in "CSS Style for Firefox IE6 IE7" is also very useful.

Anyone with a little bit of logical thinking will know that you can use IE and FF's HACK together. Here are three HACKs, for example: (Suitable for novices, haha, experts will pass by here.)

Program code

The first HACK is common to all browsers of IE FF (it is not actually a HACK) height:100px; The second HACK is exclusive to IE6 _height: 100px; The third HACK IE6 IE7 public *height:100px;

Now that we have introduced these three HACKs, let’s take a look at how to define IE6 IE7 FF-specific HACKs for each attribute in a style. Look at the code below. The order cannot be wrong:

Program code

height:100px; *height:120px; _height:150px;

Let me briefly explain how each browser understands these three attributes:

Under FF, FF does not recognize the second and third attributes, so it reads height:100px;

. Under IE7, IE7 does not recognize the third attribute, so it reads the first and second attributes. , and because the second attribute covers the first attribute, what IE7 finally reads is the second attribute *height:120px;

Under IE6, IE6 recognizes all three attributes, so three All attributes can be read, and because the third attribute overwrites the first two attributes, IE6 finally reads the third attribute.

1 css style for firefox ie6 ie7

Now most of them use !important to hack, and the test for ie6 and firefox can be normal Display, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 using "* html". Now browse it with IE7. There should be no problem. Now write a CSS like this:

#1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ * html #1 { color: #999; } /* IE7 */

Then The font color is #333 under Firefox, #666 under IE6, and #999 under IE7.

2 Centering issues in css layout

The main style definitions are as follows:

body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Explanation:

First define TEXT-ALIGN: center in the parent element; this means that the content within the parent element is centered; for IE This setting is enough.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " when setting the child element definition

It should be noted that if you want to use this method to center the entire page , it is recommended not to wrap it in a DIV. You can split out multiple divs in sequence, as long as you define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of the box model.

#box{ width: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- }

4 Double distance generated by floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore floats}

Here we will explain in detail the two elements of block and inline, and the Block element The characteristics are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block elements); the characteristics of the Inline element are: it is on the same line as other elements,... cannot be controlled (inline elements) ;

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

5 IE Problems with width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 The minimum width of the page

min-width is a very convenient CSS command. It can specify that the element must be at least a certain width, so that the layout can always be correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a under the tag, and then specify a class for the div: Then the CSS is designed like this:

# container{ min-width: 600px; width:e¬xpression(document.body.clientWidth }

First A min-width is normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7 Clear floats

.hackbox{ display:table; //Display the object as a table at the block element level }

or

.hackbox{ clear:both; }

or add: after (pseudo object), set the content that occurs after the object, usually used in conjunction with content, IE This pseudo object is not supported and is not supported by Ie browsers, so it does not affect IE/WIN browsers. The most troublesome thing about this is

...#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden; }

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%; } *html #left{ margin-right:-3px; //这句是关键 } HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{} p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。例：

p对象中的内容

CSS:

#box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; text-align:center ; }

Solution: Add 2 empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.

Block IE browser (that is, it will not be displayed in IE) *:lang(zh) select {font:12px !important;} /* FF, visible to OP*/ select:empty {font:12px !important;} /*visible to safari*/ Select here is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.

Only recognized by IE7 * html {…} You can use this HACK when you need to make styles only for IE7.

Identification for IE6 and below * html {…} Pay special attention to this place. Many landlords have written that it is a HACK for IE6. In fact, IE5.x can also recognize this HACK. Other browsers do not recognize it. html/**/ >body select {……} This sentence has the same effect as the previous sentence.

Only IE6 does not recognize it select { display /*IE6 does not recognize it*/:none;} Here mainly separates an attribute and value through CSS comments, which are released before the colon.

Only IE6 and IE5 do not recognize it select/**/ { display /*IE6, IE5 does not recognize*/:none;} The difference here from the above sentence is that there is an extra CSS between the selector and the curly braces Note.

Only IE5 does not recognize it select/*IE5 does not recognize it*/ { display:none;} This sentence removes the comment in the attribute area from the previous sentence. Only IE5 does not recognize the

box model solution selct {width:IE5.x width; voice-family:""}""; voice-family:inherit; width:correct width;} The box model's clearing method is not handled via !important. This needs to be clear.

Clear float select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} In Firefox, when the children are all When floating, the height of the parent cannot completely cover the entire child. Then use this HACK to clear the floating to define the parent once, which can solve this problem.

Truncation ellipses select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } This is after exceeding the length It will automatically cut off the excess text and end it with an ellipsis, which is a very good technique. It's just that Firefox doesn't support it currently.

Only recognized by Opera @media all and (min-width: 0px){ select {……} } Make separate settings for Opera browser.

The above are some hacks in writing CSS. It is recommended to follow the correct tag nesting (div ul li nested structural relationship), which can reduce the frequency of using hacks and avoid misunderstandings. It is not a The page requires a lot of hacks to maintain multi-browser compatibility). In many cases, the browser may work very well without even a single Hack. These are used to solve local compatibility problems. If you want to improve the compatibility The content is also separated, so you might as well try some of the filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.

Filter for IE5.x, only IE5.x is visible @media tty { i{content:"";/*" "*/}} @import 'ie5win.css' ; /*";} }/* */

IE5/MAC filter, generally not needed /**//*/ @import "ie5mac.css "; /**/

The following is the conditional comment of IE. I personally think that using conditional comments to call the corresponding Hack is a perfect multi-browser compatible solution. Put the places where hacks are needed separately. In a file, when the browser version is consistent, the Hacked style can be called. This is not only very convenient to use, but also for making the CSS itself, it can be more strictly observed whether it is necessary to use hacks. In many cases Next, when I write CSS, if I write all the code including Hack into a CSS file, it will be very casual. I can hack as much as I want. But when you write independently, you will unconsciously consider whether If it is necessary to hack, should you first hack the CSS? Or should you first adjust the things in the main CSS so that you don’t need to hack as much as possible? When you can make many browsers behave very well with just a few hacks, are you very surprised? Do you have a sense of accomplishment? Do you know how to choose~~ Haha

IE’s if condition Hack can be used flexibly. Please refer to this IE condition note Only IE All IE can recognize it

Only IE5.0 can recognize Only IE 5.0 IE5.0 can be recognized by IE5.5

Only IE6 can recognize Only IE 7/- Recognized by IE6 and IE5.Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的hack，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了hack的办法，你就掌握了一切，我们并不是Hack的奴隶。

div ul li 的嵌套顺序

今天只讲一个规则。就是 的三角关系。我的经验就是 在最外面，里面是 ，然后再是 ，当然 里面又可以嵌套 什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是 里面放 ，而不用 的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来Hack它们，但是你会烦得要命。

具体嵌套写法

遵循上面得嵌套方式， Then tell ul {Margin:0px;Padding:0px;list-style:none;} in CSS, where list-style:none prevents directory types such as dots or numbers from being displayed at the front of the tag. mark, because the default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. It's a pixel difference, but that's perfect. You don't need to adjust large swaths of CSS to control their display. If you want, you can just hack one or two places, and usually this kind of hack can be adapted to various places. No need for you to repeatedly debug different Hack methods in different places? This will reduce your troubles. You can easily sort out the places you want to hack in the form of ul.class1, ul.class2, ul.class3 {xxx:xxxx} and unify the Hack. Give it a try and don’t nest randomly again. Although you can nest almost as much as you want with Div CSS, following the above rules will make it much easier for you and get twice the result with half the effort!

/* **Compatible with IE, Firefox. Picture seamless scrolling code that follows W3C standard writing method (supports left/right shift function) (this The example is double-line scrolling of two rows of images) powered by 25175.net ** **Implementation idea: a container demo that sets the width and hides content beyond its width, and puts demo1 and demo2 in it. demo1 is scrolling content, demo2 is a direct clone of demo1, **The purpose of scrolling is achieved by continuously changing the scrollTop or scrollLeft of demo1. When scrolling to the junction of demo1 and demo2, it jumps directly back to the initial position, * *Because demo1 is the same as demo2, the jumping moment cannot be distinguished, thereby achieving the purpose of "seamless" scrolling. */ var speed1=0 //The speed of moving the picture to the left var MyMar1 //The interval ID returned by the setInterverval method, these IDs are the global number of calls (for the first row of pictures) var MyMar2 //The interval ID returned by the setInterverval method, these IDs are the global number of calls (for the second row of pictures) var lefthit=0 //Record the number of clicks on the left shift button var righthit=0 / ///Record the number of clicks on the right move button // Before calling the right move method, stop the left move (clearInterval clears the call to the setInterval method) function clearleft(){ clearInterval(MyMar1) clearInterval(MyMar2) } //How to move the picture to the left function toleft(){ //Determine whether it is the first time to press the left button (the picture starts moving to the left) When, this method will not be called. Only when the right move button is pressed, lefthit will be reset to 0) if(lefthit==0){ speed1=30; //Picture left Moving speed and time in milliseconds // Let the content of demo2 be the same as the content of demo1 document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML //Upstream image movement Method function Marquee1(){ //When demo scrolls to the junction of demo2. And is when it coincides with demo2. offsetWidth and scrollLeft are exactly equal if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft //demo jumps back to the initial position document .getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth } else{ //demo starts to move again document.getElementById("demo") .scrollLeft } } //setInterval makes the Marquee1 method execute every few seconds, and returns the number of calls ID MyMar1=setInterval(Marquee1,speed1) //When When the mouse moves over the demo. Call clearInterval to clear MyMar1. This way the picture will not move. When moving to the picture, the pictures in the first and second rows will stop document.getElementById("demo").onmouseover=function() {clearInterval(MyMar1);clearInterval(MyMar2)} //When the mouse removes the demo, reset the setInterval to let the method execute, so that the picture will continue to move document.getElementById("demo").onmouseout=function() {MyMar1=setInterval(Marquee1,speed1); clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)} //The following method is the same as the above method, used to move the picture in the second row to the left document.getElementById("demo_c"). innerHTML=document.getElementById("demo_b").innerHTML function Marquee2(){ if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft Document.GetelementByid ("Demo_a"). ScrollLLEFT- = DOCUMENT.GetelementByid ("Demo_b"). OffsetWidth} Else { Document.Getelemet Byid ("demo_a"). ScrolLLEFT } } MyMar2=setInterval(Marquee2,speed1) document.getElementById("demo_a").onmouseover=function() {clearInterval(MyMar2);clearInterval(MyMar1)} document. getElementById("demo_a").onmouseout=function() {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()} lefthit=1 //Set the left shift button. After pressing the left shift button once (no matter how many times), the code in the toleft method will not be executed again before the right shift button is pressed righthit=0 / /Set the right move button to 0, so that when the right move button is clicked next time, the toright method will be called } }

var MyMar3 //returned by the setInterverval method Interval ID, some IDs are the global number of calls (used for the first row of pictures) var MyMar4 //The interval ID returned by the setInterverval method, some IDs are the global number of calls (used for the second row of pictures) var speed2=0 //The speed of moving the picture to the right //Before calling the move left method, let the right move stop (clearInterval clears the call to the setInterval method) function clearright(){ clearInterval(MyMar3 ; Whether it is the first time to press the right move button (when the picture starts to move to the right, this method will not be called. Only when the left move button is pressed, the righthit will be reset to 0) if(righthit ==0){ speed2=30; document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee_a(){ if(document .GetelementByid ("demo"). scrollLeft & lt; = 0) { document.GetelementByid ("demo"). ScrolLLEFT = DOCUMEELEMID ("Demo2"). Width } Else { document.getElementById("demo").scrollLeft-- } } MyMar3=setInterval(Marquee_a,speed2) document.getElementById("demo").onmouseover=function() {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()} document.getElementById("demo").onmouseout=function() {MyMar3=setInterval(Marquee_a,speed2); clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}

document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML function Marquee_b( ){ if(document.getElementById("demo_a").scrollLeft document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth } Else { Document.GetelementByid ("Demo_a"). ScrollLileft- } }> MyMar4 = SetInterval (Marquee_B, Speed2) TBYID ("Demo_a") .onmouseover=function() {clearInterval(MyMar4);clearInterval(MyMar3)} document.getElementById("demo_a").onmouseout=function() {MyMar4=setInterval(Marquee_b,speed2); document.getElementById("demo").onmouseout()} righthit=1 //Set the right-moving button. After pressing the right-moving button once (no matter how many times), before pressing the left-moving button, toright The code in the method will no longer be executed lefthit=0 //Set the left shift button to 0, so that when the left shift button is clicked next time, the toleft method will be called } }