Compatibility issues (pc css)_html/css_WEB-ITnose
记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新
提出时间 | 问题描述 | 解决方案 |
2014/7/15 | table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字缺不会发生上述问题. | 方法1:可以使用怪异模式进行解析html,不建议(把!doctypehtml去掉 方法2:设置对应的元素的css;设置为块状元素或者浮动,具体帖子http://blog.csdn.net/fgdfgasd/article/details/7979763 |
2014/7/15 | ie不支持tr设置background | 使用td设置background(不推荐),使用css把tr设置background来的方便 |
为什么FF下文本无法撑开容器的高度 | 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的, 办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;} | |
怎么样才能让层显示在FLASH之上呢 | FLASH设置透明 解决的办法是给FLASH设置透明 | |
为什么web标准中IE无法设置滚动条颜色了 | 将body换成html,去掉doctype声明,进入怪异模式 | |
超链接访问过后hover样式就不出现的问题 | 被点击访问过的超链接样式不在具有hover和active了,改变CSS属性的排列顺序:L-V-H-Aa:link,a:visited,a:hover,a:active{} | |
ie6中超链接加入边框显示不全 | 加入display:block,变为块状元素;zoom:1 | |
ie6元素存在确不显示出来 | 父亲元素添加 overflow:hidden;zoom:1; ie6下浮动及绝对定位元素莫名消失的问题 在最后加入一个清浮动的div(CSS:.clear{clear:both;height:0;overflow:hidden;}HTML: | |
2014/9/26 | Variable width horizontally centered (paging Commonly used) | Use positioning parent element relative> Container element absoluteleft:50%> Target element relativeleft:-50% (or right: 50%) The exploit is a positioning vulnerability implementation |
2014/10/15 | display:inline-block elements cannot be on the same horizontal line and cannot be adjusted using marginpadding | Set adjacent elements to vertical-align:top Align the top of the image and use -px to fine-tune the image |
2014/9/27 | Hover has no effect when margin: -1px, setting z-index does not work | Use position:relative to display hover stuff |
2014/10/16 | Realize full screen layer with custom width | Use position:absolute to make it float, left:0top:0 and then use margin-left:-half the width of the image |
2014/10/24 | After setting the border in thead in the table, the tbody has no border. Call js to hide and display the element. Firefox tbody will render the border | The default is td with a background color border, switch the border |
2014/10/24 | line-height has an impact on typesetting, (Google has an impact, after float:left, leave blank on the left | Because the child elements are Inheriting the line-height of the parent element may cause problems due to browser parsing. It is ideal to use line-height of 1 or normal when initializing, so the solution is to set the line-height of the corresponding element to normal. Or change the font size to a smaller size, because line-height:1.5font-size:10px; is equivalent to line-height:15px; in fact, changing the line-height achieves the effect. Changing the font will cause some layout changes. It is not recommended. http://www .zhangyunling.com/?p=21 |
2014/10/30 | The input box and the image are not on a horizontal line, vertical-align:middle, in different browsers The interpretation in the browser is different (ie7-8) and there will be misalignment | Using vertical-align:top the browser has the same interpretation, but it should be noted that the height of the image and the height of the input box should be similar |
2014/10/30 | The server’s rendering css will be displaced | |
2014/11/3 | ie6 cannot load css with different encodings | Modify css encoding |
2014/11/3 | ie6 for floating The div has no fixed width, and there will be a right floating line break | For the left floating div, add a corresponding width |
2014/11/4 | The difference between div and section | section is more semantic and suitable for article segmentation and partial content differentiation. However, it is more recommended to use div |
if you are just using styles. 2014/11/7 | The absolute positioning of the lower left part of ie6 fails because the parent element does not add width and height | Using zoom:1 to trigger layout or adding height or width to the parent element can solve the problem |
2014/11/8 | Character line break | Use word-wrap:break-word under IE; everything is normal. Generally, word-wrap:break-word;word-break:break-all; results in long strings of English and English words being disconnected. Use: overflow:auto;ie, long strings will automatically wrap. ff, long strings will be covered. word-wrap:break-word;overflow:hidden; |
2014/12/25 | Text-align left and right | text-align :justify!important;// text-justify:distribute-all-lines;//Implemented for ie |
2014/12/25 | ie6- 7 Trigger inline-block | .classify_item{display:inline-block;width:592px;height:400px;} .classify_item_ie{*display:inline} liclass="classify_itemclassify_item_ie" display:inline-block; *display:inline; *zoom:1; |
2015/1/4 | In In IE6, when text and img, input, textarea, select, object and other objects are in the same container, the line-height attribute is invalid. The line-height attribute is only valid for full text. | Add in the style of one of the non-text objects: margin: (line-height of the container - the height of the object itself)/2px0; vertical-align:middle; |
2015/1/5 | clearfix clearing the float will automatically render the height | External elements set overflow:hidden; |
2015/1/5 | ie6-7overflow:hidden is invalid | Even if the parent element has overflow:hidden set. It is very simple to solve this bug. Use position:relative; in the parent element to solve the bug |
2015/1/6 | ie6-7li nested ul exists padding | Add *zoom in ul's father li: 1 to trigger haslayout |
2015/1/12 | iecss3htc path.iecss{behavior: url(htc/pie.htc);} | The path is the root directory path of the project. When calling css, you do not need to use ../htc/pie.htc, just htc/pie.htc. |
2015/1/14 | Under ie6, under position:relative, use js interaction, margin-left will disappear | Use padding, use js to redraw , (Add a style to force re-rendering) |
2015/1/14 | ie6-7 The parent element sets overflow:hidden, and the child element is set to position :relative is invalid | The parent element sets position:relative |
2015/3/5 | The first element in the second row of the floating element under ie7 will Line break | Floating elements must define a height otherwise the automatic height parsing will be incorrect |
2015/3/5 | Display of the a tag below li under ie7: There is a gap between block and li | a label height:100% width:100%; |
2015/3/17 | 123|123 this kind Effect margin-left: -1 Outermost layer overflow: hidden is invalid | The corresponding layer must be a block, block or inline-block to take effect |
2015/3/19 | The first element of the second row of the dl floating list was exploded under ie7 | ie7 needs to define a height |
2015/3/21 | The last floating element in ie7 will wrap | You need to force the element not to wrap white-space:nowrap; |
Please keep the original address for reprinting, thank you

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
