Common problems in div css_html/css_WEB-ITnose

1. Centering problem
The content in the div is centered by ie by default, and left aligned by ff by default.
The way to center the ff content is to add the code margin:auto;

2. Height problem
There are two horizontal rows of divs arranged, and the above div sets the height (height). If the actual div in the div If the content is greater than the set height, the two divs will overlap in FF; but in IE, the lower div will automatically make room for the upper div. Therefore, in order to avoid overlapping layers, the height must be controlled appropriately, or you may simply not write the height and let it adjust automatically.
Or set: overflow:hidden

3. clear:both;
Take footer as an example. Sometimes if the n-column layout controlled by float is used above, then when browsing with ff, footer It is very possible that he is dishonest and moves around because he is still controlled by float. If you want it to stay at the bottom of the page, write clear: both; in the div of the footer to achieve the effect!

4. Double distance generated by floating Ie
#box{
float:left;
width:100px;
margin:0 0 0 100px; //This situation Below IE will generate a distance of 200px
display:inline; //Ignore floating
}

5. Key explanation: display: block, inline two elements display (display)
display:block; //Can simulate block elements for inline elements

always starts on a new line;
height, line height and top and bottom margins can all be controlled;
width The default is 100% of its container, unless a width is set

,

,

,

,

and
• are block elements Example.
  display:inline; //Achieve the effect of arranging on the same line
  display:inline is to display elements as inline elements. The characteristics of the
  inline element are:
  and other elements are on the same line;
  Height, line height and top and bottom margins cannot be changed;
  Width is the width of its text or image and cannot be changed.
  , , , , , and are examples of inline elements.

  diplay:table; //for ff, simulate the effect of table
  6. Problems with width and height of IE and FF
  min -width is a very convenient CSS command, which can specify the minimum element It cannot be smaller than a certain width, so as to ensure that the typesetting is always correct. The overall narrowest is 770px and the widest is 1024px. In other words, if the window is smaller than 770xp, the bottom scroll bar will appear. If the window is larger than 1024px, the screen will be automatically centered. IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. In this way, 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.
  CSS is designed like this:
  #container{
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
  }
  
  The first min-width is normal; but the width in the second line uses Javascrīpt, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript's judgment.
  
  The same method can also be used to achieve the maximum width for IE:
  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression (document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto”;
  }
  
  7. FF: support!important, IE Ignored,
  can be used with !important (for example: height:30px!important; height:26px;) to specially set the style for FF. The vertical centering problem of
  div: vertical-align:middle; increases the line spacing to the entire DIV The same height line-height: 200px; then insert text and it will be vertically centered. The disadvantage is that the content must not be wrapped
  cursor: pointer can display the cursor finger shape in IE FF at the same time, and only IE can
  FF: To add borders and background colors to links, you need to set display: block and float: left to ensure no line breaks (the background image needs to be set to float: left). Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge. Set height, you can insert a space in the menubar
  The box model interpretation in FF and IE is inconsistent, resulting in a difference of 2px. Solution:
  div{margin:30px!important;margin:28px;}
  
  Note that the order of these two margins must not be reversed. The !important attribute cannot be recognized by IE, but other browsers can, so it is actually interpreted like this under IE:
  
  div css xhtml xml Example Source. Code Example Source Code [www.52css.com]
  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;
  
  

Related labels：

div+css中常见的问题

source：php.cn

Previous article：一个CSS+div高度自适应布局模型_html/css_WEB-ITnose Next article：Learning Day 12@div css_html/css_WEB-ITnose

Statement of this Website

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

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...

From 2024-04-06 18:16:26

0

1

403

React Three Fiber: Why are my scroll events lagging? In ReactThreeFiber, I have a React component that generates a sprite that I want to persis...

From 2024-04-06 13:39:24

0

1

410

OAuth 2.0 configuration settings I'm using phpmailer to send mail through smtp.google.com server but now it's not working b...

From 2024-04-06 11:12:57

0

1

408

How to insert multiple rows in MySQL table and return new IDs? Normally I can insert a row in a MySQL table and get the last_insert_id. But now, I want t...

From 2024-04-06 10:03:44

0

2

294

The list item symbols (<ul> and <ol>) in the root node cannot be displayed and removed in CSS, and the overflow-x: hidden problem cannot be removed. I'm currently working on a web page and I'm having trouble with my list items. The dots an...

From 2024-04-04 16:38:22

0

1

3617

Related Topics

More>

• Set default printer
• Usage of gettickcount function
• Domestic digital currency platform
• Hide taskbar icon software
• What software is ig
• How to write the InsertInto statement
• asp what file
• Advantages of downloading the official website of Yiou Exchange App