DIV CSS design features related to compatibility of IE6, IE7, and FF (reprinted)_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 11:57:13
Original
830 people have browsed it
When designing a website, you should pay attention to css style compatibility issues with different browsers, especially for websites designed entirely using DIV CSS, you should pay more attention to the compatibility of IE6 IE7 FF Compatibility of CSS styles, otherwise, your network may become cluttered and have unwanted effects!
Common to all browsers height: 100px; Exclusively for IE6 _height: 100px; Exclusively for IE6 *height: 100px; Exclusively for IE7 * height: 100px; Shared by IE7 and FF height: 100px !important; 1. CSS compatibility The following two methods can solve almost all compatibility issues today. 1, !important (not very recommended) , it feels safest to use the following one) With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be in advance.) Code:
Note: * html Compatibility with 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 the problem of incorrect spacing when aligning multiple divs. For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup] Change the following Add the code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time. Code:
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 vetical-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. The difference in the understanding of BOX between FF and IE leads to a 2px difference. 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 prepare it in advance declaration 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: Compatible with the most recommended mode. /* FF */ .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right : 12px; } /* IE6 */ *html .submitbutton { margin-top: 21px; submitbutton { margin-top: 21px; } What is browser compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, some differences will appear. Regarding compatibility issues, 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 producers. Although IE7 has become standardized, it still has many differences from FF, so the compatibility of IE7 needs to be used. Many friends have asked what the compatibility of IE7 is, but I actually don’t know. I haven't found any compatibility specifically for IE7 yet. In addition to the previous article, the compatibility 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 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 The first one is compatible with IE FF and is common to all browsers (in fact, it is not considered compatible) height:100px; The second one is compatible with IE6 only _height:100px; The third one is compatible with IE6 IE7 Public *height:100px; Now that we have introduced these three compatibility, let’s take a look at how to define IE6 IE7 FF-specific compatibility for an attribute in a style. Look at the code below. The order cannot be wrong. Oh: Program code height:100px; *height:120px; _height:150px; Let me briefly explain how each browser understands these three attributes: Under FF, the second and third attributes are not recognized by FF, so it reads height:100px; Under IE7, the third attribute is not recognized by IE7, so it reads the first and second attributes, and because The second attribute covers the first attribute, so what IE7 finally reads is the second 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. 1 CSS styles for firefox ie6 ie7 Now most of them are compatible 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 compatibility method for IE7 by 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; } /* IE*/
CSS: #box { } #box p {margin-top: 20px; margin-bottom: 20px; text-align:center; } Solution: Place the upper and lower margins on the P object Add 2 empty div objects 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, OP visible*/ 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. Identification for IE6 and below * 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 it select { display /*IE6 does not recognize it*/:none;} Here is mainly to separate 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 additional CSS comment between the selector and the curly braces. 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 Box model solution selct {width:IE5.x width; voice-family:""}""; voice-family:inherit; width:correct width;} Box model The clearing method is not handled through !important. This needs to be clear. Clear floats select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} In Firefox, when the children are all floats, Then the height of the parent cannot completely cover the entire child. Then use this clear floating compatibility to define the parent once, then this problem can be solved. Truncation ellipsis select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } This will be truncated automatically after exceeding the length It is a good technique to add extra text and end it with an ellipsis. It's just that Firefox doesn't support it currently. Only Opera recognition @media all and (min-width: 0px){ select {……} } Make separate settings for 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'; /* ";} }/* */ IE5/MAC filters are generally not needed /**//*/ @import "ie5mac.css"; / **/ The following is the conditional comment of IE. I personally think that using conditional comment to call the corresponding compatibility is a perfect solution for multi-browser compatibility. Put the parts that need compatibility into a separate file, and when the browser version meets the requirements, You can call the compatible style when using it, which is not only very convenient to use, but also allows you to more strictly observe whether it is necessary to use compatibility when making the CSS itself. In many cases, when I write CSS, if I When all the code including compatibility is written into a CSS file, it will be very casual, and it can be compatible as much as you want. But when you write it independently, you will unconsciously consider whether it is necessary to be compatible. Should you be compatible with CSS first? Or should you first adjust things in the main CSS so that they don’t require compatibility as much as possible? When you can make many browsers behave well with only a small amount of compatibility, do you feel a sense of accomplishment? Do you know how to choose? Come on ~~ Haha If conditions of IE are compatible, you can use them flexibly. Please refer to this IE condition comment Only IE All IE can recognize it Only IE5.0 can recognize it Only IE 5.0 Can be recognized by IE5.0 or IE5.5 Only IE6 can be recognized Only IE 7/- IE6 and IE5.x below IE6 can be recognized Only IE 7 /- Only recognized by IE7 There are many things in CSS that will make you very upset if they do not follow certain rules. Although you can control it through a lot of compatibility and a lot of !important, you will find that you will be very unwilling to do so in the long run. Take a look Aren't you envious of the many excellent websites whose CSS makes IE6, Ie7, Firefox, and even Safari and Opera run flawlessly? And their seemingly complex templates use very little compatibility. In fact, you have to know that IE and Firefox are not so disharmonious. We can find a certain method to make them coexist harmoniously. Don't think that if you find a compatible method, you have mastered everything. We are not slaves to compatibility. The nesting order of div ul li Only one rule will be discussed today. It is the triangular relationship of
. My experience is that
is on the outside, with
inside, and then
. Of course,
can be nested inside
, but it is not recommended that you nest it. Pack a lot of stuff. When you comply with such rules, those unlucky, disobedient gaps will not appear inside. When you just put
inside
instead of
, you You will find that your gap is very difficult to control. Under normal circumstances, IE6 and IE7 will have more gaps out of thin air. But in many cases, when you go to the next line, the gap disappears, but the previous content is empty. In this case, you can change the Margin of IE, and then adjust the Padding under Firefox so that the two can be displayed. The effect is very similar, but your CSS will become extremely stinky, and you will have to think more about possible remedies for this problem. Although you know that you will be compatible with them all, you will be annoyed to death. Specific nesting writing method Follow the above nesting method,
< /div> and then tell ul in CSS {Margin:0px;Padding:0px;list-style:none;}, where list-style:none prevents the
tag from displaying directory type tags such as dots or numbers at the front, because IE and Firefox display The default effect is slightly 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. The difference in pixels, but that's 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. No need for you to repeatedly debug different compatibility methods in different places? This will 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 anymore. Although you can nest almost as much as you want with Div CSS, you will be much more relaxed by following the above rules and get twice the result with half the effort!
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
