Home >Web Front-end >HTML Tutorial >DIV CSS compatibility solves the general method of IE6/IE7/FF browsers and is perfectly compatible [Reprint]_html/css_WEB-ITnose
DIV CSS compatibility solves the general method of IE6/IE7/FF browsers and is perfectly compatible [Reprint]_html/css_WEB-ITnose
WBOYOriginal
2016-06-24 12:27:251217browse
When designing a website, you should pay attention to the compatibility of CSS styles with different browsers. Especially for websites designed entirely using DIV CSS, you should pay more attention to the compatibility of IE6 IE7 FF with CSS styles. Otherwise, your Internet chaos may cause unwanted effects!
Height common to all browsers: 100px; IE6-specific_height: 100px; IE6-specific*height: 100px; IE7-specific* height: 100px; IE7, FF Shared height: 100px !important;
1. CSS HACK
1, ! important
With IE7's support for !important, the !important method is now only for IE6's HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
以下为引用的内容：
2, IE6 /IE7 for FireFox
以下为引用的内容： * html 与 *html 是IE特有的标签, firefox 暂不支持.而* html 又为 IE7特有标签.
Note: * html HACK for IE7 must ensure the following statement at the top of the HTML:
2. Universal float closure
The principle of clear float can be See [How To Clear Floats Without Structural Markup] Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.
以下为引用的内容：
3. Other compatibility tips
1. Setting padding on a div under FF will cause the width and height to increase, but IE will not. (can be solved with !important) For example, width:115px !important;width: 120px;padding:5px;
It must be noted that !important; must be in front. 2. Centering problem. 1). Vertically center. 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 center. margin: 0 auto;( Of course it is not a panacea) 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. The difference in understanding of BOX between FF and IE leads to a 2px difference in divs set to float. Issues such as margin 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. As an external wrapper Do not set the height of the div. 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.
Compatible code: compatible and 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 compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, it will appear Some incompatibility problems, some are displayed normally, and some are displayed abnormally. We will be very annoyed when writing CSS. We just fixed the problem of this browser, but another browser has a new problem. Compatibility 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, it still has many differences from FF, so IE7 compatibility needs to be used. Anyone with a little bit of logical thinking will know that you can use the compatibility of IE and FF together. Here are three compatibility options, for example: (Suitable for novices, haha, experts will stop by here.) Program Code Chapter One is compatible, common to all IE FF browsers (actually not considered compatible) height:100px; the second is compatible with IE6 only_height:100px; the third is compatible with IE6 IE7 common*height:100px; That’s it. The three are compatible. Let’s take a look at how to define compatibility for IE6 IE7 FF for each attribute in a style. Look at the code below. The order must not 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, IE7 finally reads the second attribute. Attribute *height:120px; Under IE6, IE6 recognizes all three attributes, so all three attributes can be read. And because the third attribute overwrites the first two attributes, IE6 finally reads the third attribute. three attributes.
1 Most of the css styles for firefox, ie6 and ie7 are now hacked with !important. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required. ! I found a good hack for IE7 by using "* html". Now browse it with IE7 and there should be no problem. Now write a CSS like this:
CSS: #box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; text-align:center; } Solution: in Add two 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, not displayed in IE) *:lang(zh) select {font:12px !important;} /*FF, visible to OP*/ select:empty {font:12px !important;} / *Visible in safari*/ Here select 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 compatibility when you need to make styles only for IE7. IE6 and below recognition * html {…} Pay special attention to this place. Many landlords have written that it is compatible with IE6. In fact, IE5.x can also recognize this compatibility. Other browsers do not recognize it. html/**/ >body select {……} This sentence has the same effect as the previous sentence. Only IE6 does not recognize select { display /*IE6 does not recognize*/:none;} Here we mainly use CSS comments to separate an attribute and value, which are released before the colon. Only IE6 and IE5 do not recognize select/**/ { display /*IE6, IE5 does not recognize*/:none;} The difference here from the above sentence is that there is an additional CSS comment between the selector and the curly braces. Only IE5 does not recognize select/*IE5 does not recognize*/ { display:none;} This sentence is the comment in the attribute area removed 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 clearing method is not passed! important to handle. This needs to be clear. Clear floating select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} In Firefox, when the children are all floating, the height of the parent is If you cannot completely wrap the entire child, then use this clear floating compatibility to define the parent once, which can solve this problem. Truncation ellipsis select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } This is to automatically cut off the excess text after it exceeds the length. And end with an ellipsis, a 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 the Opera browser. The above are some compatibility in writing CSS. It is recommended to follow the correct tag nesting (div ul li nested structure relationship). This can reduce the frequency of using compatibility and avoid misunderstandings. It is not required for just one page. A lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without using any compatibility. These are used to solve local compatibility problems. If you want to separate the compatibility content, Come out and 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'; /*";} }/* */ The filter of IE5/MAC is generally not needed /**//*/ @import "ie5mac.css"; /**/ The following is the conditional comment of IE. I personally think that conditional comments should be used Calling corresponding compatibility is a perfect solution for multi-browser compatibility. Put the areas that need compatibility into a separate file. When the browser version is consistent, you can call the compatible style. This is not only very convenient to use, but also And when it comes to making the CSS itself, we can more strictly observe whether it is necessary to use compatibility. In many cases, when I write CSS, I would be very casual if I write all the code including compatibility into a CSS file. Compatible as you want, and when you write independently, you will unconsciously consider whether it is necessary to be compatible. Should you first make it compatible with CSS? Or should you first adjust the things in the main CSS to be as compatible as possible? Don’t you feel a sense of accomplishment when you make many browsers behave well with only a small amount of compatibility? Do you know how to choose~~ Haha You can use IE’s if condition compatibility flexibly. This IE condition comment is Only IE. All IEs can recognize it. Only IE5.0 can recognize it. Only IE 5.0 IE5.0 can replace IE5.5. Only IE6 can recognize it. Only IE 7/- IE6 and IE6. Only IE 7/- can be recognized by the following IE5. !important to control it, but you will find that you will be unwilling to do so in the long run. Look at many excellent websites. Their CSS makes IE6, Ie7, Firefox, and even Safari and Opera run perfectly. Are they envious? There is very little compatibility between seemingly complex templates. In fact, you have to know that IE and Firefox are not so inharmonious. We have found a way to make them coexist harmoniously. Don't think you have found a compatible way. , you have everything under control, we are not slaves to the nesting order of div ul li .今天只讲一个规则。就是
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 any tricks. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe you will find at a certain moment: two icons if you are careful. There is a difference in quality, but that is already perfect. You don’t need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. Do you need to repeatedly debug different compatibility methods in different places? Reduce your trouble. You can easily sort out the places you want to be compatible with using ul.class1, ul.class2, ul.class3 {xxx:xxxx}, and make them compatible. 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!
6. Analysis of CSS compatibility points IE vs FF
CSS compatibility points:
DOCTYPE affects CSS processing
FF: div When setting margin-left and margin-right to auto, it is already centered, but IE does not work
FF: When body sets text-align, div needs to set margin: auto (mainly margin-left, margin-right) Centered
FF: After setting padding, the div will increase height and width, but IE will not, so you need to use !important to set an additional height and width
FF: Support !important, IE will Ignore, you can use !important to specially set the style for FF
The vertical centering problem of div: vertical-align:middle; increase the line spacing to the same height as the entire DIV line-height:200px; then insert text and center it vertically . The disadvantage is that it is necessary to control the content without wrapping
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
FF: Add a border and background color to the link, and you need to set the display: block, and set float: left to ensure no line breaks. Referring to the menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If the height is not set, you can insert a space in the menubar. XHTML CSS Compatibility Solution Collection
There are many benefits to using the XHTML+CSS architecture. But there are indeed some problems. Whether it is due to unskilled use or unclear thinking, I will write down some of the problems I encountered below to save everyone from looking around^^
1. In mozilla firefox The inconsistent explanation with the BOX model in IE leads to a difference of 2px. Solution:
div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;
2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of the div is 280px, while on IE6 and other browsers the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications
, about this/**/. I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands, please let me know, thanks! :)
3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first
ul{margin:0;padding:0;}
can solve most problems.
4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to
< type=”text/java”>
That’s it
7. 10 CSS skills you may not know
1. CSS font attribute abbreviation rules
Generally, this is how to set font attributes with CSS:
The following is the quoted content: font-weight:bold;font-style:italic;font-varient:small-caps;
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
…
In this way, no matter what browser, the width will be 150 points.
7. Align block elements in the center
If you want to make a fixed-width web page and want the web page to be centered horizontally, it is usually like this:
#content { width: 700px ; margin: 0 auto }
You will use
to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display this effect. Change the CSS as follows:
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
This will center the content of the web page. So
text-align: left was added to Content.
8. Use CSS to handle vertical alignment
Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.
What is the CSS method? By the way, set the line-height of these words to 2em: line-height: 2em and that's it.
9. CSS positioning within a container
One benefit of CSS is that you can position an element arbitrarily, even within a container. For example, for this container:
#container { position: relative }
In this way, all elements in the container will be relatively positioned. You can use it like this:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
