Differences between CSS in IE and FIREFOX and solutions page 1/2 _ experience exchange

The difference between CSS in IE and FIREFOX and the solution CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points.
High Resolution
IE: the actual height will be used even if the height of the image content is defined based on the height change of the content, including the undefined height of the image content, when the content exceeds the height
Firefox: when no height is defined, if the image content is included in the content, the MF height resolution is based on the printing standard, which will cause a highly inconsistent situation with the actual content; when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.
Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy!

Analysis of alt and title of img objects
Alt: the prompt when the photo does not exist or the load error occurs;
Title: tip description of the photo.
If title is not defined in IE, alt can also be used as the img tip. However, in MF, the two are completely used according to the standard definition.

Conclusion: when defining img objects, you can write both alt and title objects to ensure that they can be used properly in various browsers.

Other details
When you write css, especially when you use float: left (or right) to arrange one-click images, you will find that there is a normal problem in firefox and IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help.

In fact, there is another problem here, that is, the processing of spaces by IE. firefox ignores the processing of spaces between blocks by IE. That is to say, the end of a p should be followed by a p, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.

Unfortunately, I encountered this problem again, connecting multiple img labels and defining float: left. I hope these images can be connected. However, the results are normal in firefox, and each img displayed in IE is 3 px apart. Deleting spaces between tags does not work.

Later, the solution was to set li outside img and define margin: 0 for li, which solved the display deviation between IE and firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more.

2. nested DIV: the height of the parent DIV cannot be automatically changed based on the Child DIV.

When the Content is too large, even if the parent is set to a height of 100% or auto, it cannot be automatically stretched in different browsers. Solution

A space with a height of 1 is generated at the bottom of the layer to solve this problem.

3. css div learning notes

I. Basically, p in each block must have its own id to prevent blocks with different functions from using the same id/class

2. Each slightly larger block p is followed by Mark start and end

3. Another method for hiding TEXT: TEXT-INDENT:-9999px; LINE-HEIGHT: 0

4. cleverly handle the two parallel columns:

1)
Right column: P, width = 44.5%, float = left
Column P. first, border-right: # a7a7a7 1px solid, width = 45%
2)
Right column # right, margin-left: 50%
Left column # left, float = left, width = 50% border-right: # a7a7a7 1px solid

The key of the above two methods is to select float = left

5. Randomly switch images:

#random { BACKGROUND: url(/rotate.php); }

This method is clever.

4. highly adaptive p
Today, Xiaoye asked me to solve a problem on his page, that is, p's highly adaptive, that is, nesting one left, one right, two children p in a parent p, the content of the child p on the right can be infinitely expanded, and the height of the parent p can be infinitely lengthened. In general layout, the content can be correctly browsed in IE, in Mozilla, the height of the parent p is fixed at around 10 PX, and the height cannot be adaptive. The height: auto cannot be used either. What should I do. I have referenced a document on the Internet. To achieve adaptive height, the p layer must have the float attribute. So I started the experiment. If float: left, p ran to the far left of the page, this is easy to do. I set another p layer on the outside and set the position. Even if float: left is in the position, it will not be moved.

Xhtml:

========================================================== ============================

 
 
Test
Test
Test
 
   
 
 
 
 
 
  
  
Pre-Installation check
 
  
  
Read the PFC authorization Protocol
 
  
  
Initialize Database
 
  
  
Complete installation
 
 
 
 
  
 
  
 

CSS
========================================================== ==========

#container_father { margin-left: auto; margin-right: auto; padding: 0px; width: 750px; } #container { width: 750px; border: 1px solid #cccccc; padding: 8px; margin: 0px; background-color: #F1F3F5; float: left; }

5. In-depth standards ~ The IE Doubled Float-Margin Bug (IE Double Floating boundary Bug)
What is the fault?

A piece of error-free code places a float: left element into a container box and uses the left Border (margin-left) on the floating element) to make it a distance from the left side of the container. It looks quite simple, right? But until it is browsed in IE/Win, the border length of the left floating element in the browser is mysteriously doubled!

What should happen?

The following illustration shows a simple p (a brown box) containing a left-floating p (Green Box ). A floating element has a left boundary of PX, which generates a gap of PX between the container box and its left edge. So far, it has been good.

 .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; /*This last value applies the 100px left margin */ }

Old IE "double occupied"

The same original code is displayed in a slightly different way when viewed in IE/Win. The following illustration shows the layout of IE/Win.

Why does this happen? Don't ask this silly question! This is IE, remember? Compliance with the standards is just an ideal situation and is not expected to be achieved. This simple fact is being verified.

Key Points

This Bug occurs only when the floating boundary and the floating element direction appear between the floating element and the inner edge of the container box at the same time. Any floating element with similar boundary afterwards does not display double boundary. Only the first floating element of a specific floating row will encounter this Bug. As in the left-side case, the double border is mysteriously displayed in the same way as the right-side case.

Finally, solution!

Until now (January) this Bug has been regarded as unrecoverable. It is usually used to replace the control method of the wrong boundary, for example, the left margin of an invisible floating element, together with an embedded box, the visible box is packed in an invisible floating element; or you can use this technique to set only 1/2 of the boundary for IE/Win. This method takes effect, but it is messy and the source code is corrupted. But now it's all over.

Steve Clason found a fix. In his Guest Demo, he fixed the Bug of double boundary and text indent. This is a classic IE Bug fix. You can use a property to fix bugs that affect unrelated properties.

How to do it now?

Studying it, simply setting {display: inline;} to floating elements is all you need to do! Yes, it sounds too simple, isn't it? However, this is true. Only one display "inline" statement is qualified.

People familiar with the Rules know that floating elements are automatically set to "block" elements, regardless of what they were. As Steve pointed out from W3C:

9.5.1 Positioning the float: the 'float' property "This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings: left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'. right Same as 'left', but content flows on the left side of the box, starting at the top. none The box is not floated. "

This indicates that the {display: inline;} on the floating element will be ignored. In fact, no changes are made to all browsers, including IE. However, it somehow causes IE to stop doubling the boundary of floating elements. Therefore, this solution can be applied directly without any tedious hidden methods. If a browser decides to fix the vulnerability in the future, just mount the vulnerability to Tan Hack, which is dedicated to IE, and the details are like IE Three Pixel Text-Jog Demo.

Below are two vivid demos using the same code above. The first Bug that shows IE as usual, and the next one uses "inline" to fix floating elements.

.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; }

The above is the difference between CSS in IE and FIREFOX and the solution page 1/2 _ experience exchange content. For more information, please follow the PHP Chinese Network (www.php1.cn )!