[Web front-end development] Browser compatibility processing encyclopedia_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. You can try to add code margin: 0 auto;

2. Height problem

For two divs arranged one above the other or nested, the height of the div above is set. If the actual content in the div is greater than the set height, two divs will overlap in FF. phenomenon; but in IE, the lower div will automatically make space for the upper div, so in order to avoid overlapping layers, the height must be controlled appropriately, or simply not write the height and let it adjust automatically. A better method is height :100%; But when the first-level elements in this div are all float, you need to add an empty div with a sunken bottom at the end of the div block and before closing. The corresponding CSS is: .float_bottom {clear:both;height :0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

If you don’t want to be affected by float, just write clear:both;

4. Double distance generated by IE floating margin

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

5. Padding problem

After FF sets padding, the div will increase height and width, but IE will not (* the standard XHTML1.0 definition dtd seems to be consistent) to control the height appropriately, or try to use height:100% ; Use padding to reduce the width. But according to actual experience, generally there will not be much difference between the padding of FF and IE. The actual width of the div = width padding, so write the full width and padding of the div. Width is defined by the actual desired width minus padding. .

6. Problems with padding and marign on the y-axis when divs are nested

The distance from the child div to the parent div on the y-axis in FF is the parent padding and child marign
The y-axis in IE The distance from the upper child div to the parent div is the larger of the parent padding and the child marign.
When the parent padding=0 and border=0 on the y-axis in FF, the distance from the child div to the parent div is 0, and the child marign affects the parent. Outside the div

7. Foolish solutions to padding, margin, height, width

Note that it is a skill, not a method:
Write the standard header well
-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Use padding as much as possible, use margin with caution, and try to add 100% to the height. If the parent height has a fixed value, the child height does not need to be 100%. When all are floating, fill in an empty space at the bottom of clear: both divs should be as wide as possible. Use padding with caution. Calculate the width accurately and subtract padding

8. List class

1. ul Tags have a padding value by default in FF, but in IE only margin has a value
First define ul {margin:0;padding:0;}
2. Eliminate the indentation problem of ul and ol lists. When indenting lists such as ol, the style should be written as: {list-style:none;margin:0px;padding:0px;}

9. Display class (display: block, inline)

1. Two elements, display:block and inline
display:block; //You can simulate inline elements as block elements
display:inline; //Achieve the effect of being arranged in the same row
display: table; //for FF, simulate the effect of table
display:block block element, the characteristics of the element are:
always starts on a new line; height, line height and top and bottom margins can all be controlled; The width defaults to 100% of its container, unless a width is set

,

,

,

,

and
• are blocks Examples of elements
  display:inline is to display the element as an inline element. The characteristics of the element are: it is on the same line as other elements; the height, line height and top and bottom margins cannot be changed; the width is its text or picture The width cannot be changed. , , , , , and are examples of inline elements
  2. Mouse finger-like display
  All use the standard writing method cursor: pointer;
  
  10. Background, picture class
  
  1. Background display problem
  Please pay attention to complete the width and height attributes
  2. Background Transparency issues
  IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
  IE: filter: alpha(opacity=10);
  FF: opacity:0.6;
  FF: -moz-opacity:0.10;
  It is best to write both and put the opacity attribute below
  
  11. Implementation of min-height minimum height (compatible with IE6, IE7, FF )
  
  The function is: when the content of the container is small, it can maintain a minimum height to avoid destroying the layout or UI design effect. When the content in the container increases, the container can automatically stretch to adapt to the changes in content.
  #mrjin {
  background:#ccc;
  min-height:100px;
  height:auto !important;
  height:100px;
  overflow:visible;
  }
  
  12. The famous Meyer Reset
  
  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
  {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  }
  :focus {
  outline: 0;
  }
  body {
  line-height: 1;
  color: black;
  background: white;
  }
  ol, ul {
  list-style: none;
  }
  table {
  border-collapse: separate;
  border-spacing: 0;
  }
  caption, th, td {
  text-align: left;
  font-weight: normal;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  content: "";
  }
  blockquote, q {
  quotes: "" "";
  }
  
  13、跨浏览器的CSS透明度
  
  .transparent {
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  
  14、文字阴影（CSS3）
  
  .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
  
  15、Box阴影(CSS3)
  
  .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
  
  16、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
  
  
  
  

  
  
  
  
  
  CSS:
  * { margin:0; padding:0; }
  html, body, #wrap { height: 100%; }
  body > #wrap {height: auto; min -height: 100%;}
  #main { padding-bottom: 150px; }
  #footer {
  position: relative;
  margin-top: -150px;
  height: 150px;
  clear:both;}
  .clearfix:after {content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }
  .clearfix {display: inline-block;}
  * html .clearfix { height: 1%;}
  .clearfix {display: block;}
  
  17. iframe element? How to remove the inherited html and body background color/background image in the embedded interface
  
  The function of the iframe element is to embed a document in a document and create a floating frame. An embedded document is a complete page with HTML, BODY and other attributes. This encounters a problem. If the background color/background image is defined for BODY in the style sheet, the embedded document will all inherit it. So how to remove the background color and background image:
  【1】Remove the background color: filter:Chroma(Color=white);
  Example:
  【2】Remove the background image:
  Example:
  Note: The embedded page must also add the BODY attribute:
  < ;body bgcolor="transparent" style='background:transparent'>
  
  18. Why can't the IE browser scroll bar color be set in web standards?
  
  Original style settings:
  
  

  <br><param name="wmode" value="transparent"><br> <br>22. How to center a div layer in the browser? <br> <br><style type="text/css"><br /><!--<br />div {<br />position:absolute;<br />top:50%;<br />left :50%;<br />margin:-100px 0 0 -100px;<br />width:200px;<br />height:200px;<br />border:1px solid red;<br />}<br />--> <br /></style><br> <br>23. How to make the div background transparent? <br> <br>First of all, these two layers need to be brothers. Secondly, both layers need to be absolutely positioned. For example: <br><br><br><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br><meta name="author" content="colinivy"><br><title> Colinivy's world</title><br><style type="text/css"><br /> body {<br /> font:normal 12px/30px Verdana; }<br /> #test {<br /> position:relative;<br /> width:400px; <br /> height:50px;<br /> }<br /> #inner {<br /> z-index:2;<br /> position:absolute;<br /> top:10px;<br /> left:10px;<br /> width:380px;<br /> height:30px;<br /> color:#003;<br /> font-weight:bold;<br /> text-align:center;<br /> }<br /> #transbox {<br /> z-index:1;<br /> position:absolute;<br /> top:0px;<br /> left:0px;<br /> width:400px;<br /> height:50px;<br /> background:#eef;<br />border:1px solid #a00;<br /> filter:alpha(opacity=40);<br /> -moz-opacity:0.4;<br /> opacity:0.4;<br /> }<br /></style><br><br><br> <div id="test">
  <br> <div>
  <br><p>这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,</p>
  <br> </div>
  <br> <div id="transbox"></div>
  <br> <div id="inner">
  <br> BlueIdea,BlueIdea,BlueIdea <br> </div>
  <br> </div><br><br><br> <br>24、怎样去掉选中时的虚线框？<br> <br>利用onfocus="this.blur();"例如：<a href="#" onfocus="this.blur();">测试</a><br> <br>25、ie6下png背景显示问题？<br> <br>针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);<br> <br>26、文字与表单对齐方法？<br> <br>设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:<br>body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}<br> <br>27、optgroup标签的用法？<br> <br>optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：<br><select id="selectId"><br><optgroup label="GROUP ONE">
  <br><option value="1">one select</option>
  <br><option value="2">two select</option>
  <br>
  </optgroup>
  <br><optgroup label="GROUP TWO">
  <br><option value="3">three select</option>
  <br><option value="4">four select</option>
  <br>
  </optgroup>
  <br></select><br> <br>28、文字与图片垂直居中对齐方法？<br> <br>为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:<br><p>我要的坚强<img  src="/static/imghwm/default1.png" data-src="i/image.gif" class="lazy" alt="[Web front-end development] Browser compatibility processing encyclopedia_html/css_WEB-ITnose" ></p><br>只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.<br> <br>29、文章标题列表中日期居右显示的两种方法？<br> <br>方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:<br>方法A：<br> <p>这是文章标题<span>2010-10-10</span></p><br>然后定义p和span的样式：<br>p{ position:relative}<br>p span{ position:absolute; right:0}<br>方法B:<br><p><span>2010-10-10</span>这是文章标题</p><br>然后定义span右浮动:<br>p span{float:right}<br> <br>30、ie6下max/min-width/height实现？<br> <br>ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.<br> <br>31、空白外边距互相叠加的问题？<br> <br>一般通过添加透明边框或者1px的内边距避免；<br>其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;<br>其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；<br>例如：<br><br><br><meta charset="utf-8"><br><title>空白边距叠加demo@Mr.Think</title><br><style><br />body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}<br />div{background:#a40000;margin:10px}<br />div p{background:#eee;margin:15px}<br /></style><br><br><br><div><p>空白边距叠加demo@Mr.Think</p></div><br><br><br> <br>32. Default fonts in web design<br> <br>font: 12px/1.5 Tahoma, Helvetica, Arial, sans- serif;<br>Explanation: line-height adopts 1.5, which is 18px. This is the line height defined in Taobao visual specifications. For a 12px font, this line height looks very comfortable. The font-family defaults to Tahoma. Tahoma is the default font for the English Windows operating system. This font is relatively balanced and displays a good mix of Chinese and English. It is a long-lasting font. <br> <br>33. Browser compatible??Commonly used css hack<br> <br>(1).title{ height:200px;<br> *height:200px;<br> _height:200px; }<br>(2).title{ height:200px;<br> *height:200px !important;<br> *height:200px; }<br>(3).title{ height:200px; }<br> *html .title{ height:200px;}<br> * html.title{ height:200px;}  <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p><p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>