Craters encountered by CSS on IE6

A few days ago, when I was doing something for a project, I encountered an interesting project, which needs to be compatible with IE6. I have some problems encountered and solved, so I will write them down for you to meet similar problems in the future

Can YOU give me a thumbs up if I can help you?

1. Important is not supported well enough

1.1 Why not good enough?

Important In some cases does not determine the final style attribute.

1.2 code! Code!!!!!

We illustrate all this through the control of color

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        border: aliceblue 2px solid;
    }

    .frist {
        background-color: red ! important;
        background-color: blue;
    }

    .second {
        background-color: red ! important;
    }

    .third {
        background-color: blue;
    }

    .second {
        background-color: blue;
    }
</style>
<div class="frist"></div>
<div class="second third"></div>
<div class="second"></div>
Copy the code

1.3 above! Above!!!!!

Google	ie6

1.4 What do we find?

1. Important in the same CSS block is less powerful and will be overwritten by subsequent styles; 2. But if you don't write it in the same CSS block, you're still you. So we can use this vulnerability to write ie6 proprietary style (pseudo hack).Copy the code

2. Margin double problem

2.1 Causes

Margin doubles when float and margin are set at the same time

2.2 Code Code!

<style type="text/css">
     /** Parcel area **/
    .area {
        width: 200px;
        height: 200px;
        background-color: #00FFFF;
    }

     /** bottom indicator **/
    .footer {
        width: 200px;
        height: 100px;
        background-color: royalblue;
    }

     /** test, margin code block **/
    .testMargin {
        width: 200px;
        height: 100px;
        float: left;
        margin: 50px;
        background-color: #0079CC;
    }

     /** 50px indicator **/
    .checkLine {
        width: 50px;
        float: left;
        height: 100px;
        display: inline-block;
        background-color: # 000;
    }

     /** 100px indicator **/
    .checkLine2 {
        width: 50px;
        height: 100px;
        display: inline-block;
        background-color: teal;
    }
</style>
<div class="area">
    <div class="testMargin"></div>
</div>
<div class="footer">
    <! -- 50px indicator block -->
    <span class="checkLine"></span>
    <! -- 100px indicator block -->
    <span class="checkLine2"></span>
</div>
Copy the code

2.3 Let’s see the effect

Google	ie6

2.4. How to solve it?

Plan 1:

Set div to display: inline

.testMargin {
    width: 200px;
    height: 100px;
    float: left;
    display: inline;
    margin: 50px;
    background-color: #0079CC;
}
Copy the code

Scheme 2:

Write ie6 hacks

.testMargin {
    width:200px;
    height:100px;
    float:left;
    margin:50px;
    background-color:#0079CC;
    _margin: 50px 25px;
}
Copy the code

2.5 Solution Result

3. In IE6, the image will have a blue gray background color

3.1 the CSS code

<style type="text/css">
    .pngImg {
        border: #FF0000 1px solid;
        width: 200px;
        height: 200px;
    }

    .jpgImg {
        border: black 1px solid;
        width: 200px;
        height: 200px;
    }

    .pngSpan {
        border: blue 1px solid;
        display: inline-block;
        width: 200px;
        height: 200px;
        background: transparent url(https://jhcan333.github.io/can-Share/image/ie6/404.png) no-repeat center top;
        background-size: cover;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/ie6/404.png", sizingMethod='scale'); / * 6 * / effectively
        _background: none; / * 6 * / effectively
    }

    .jpgSpan {
        border: brown 1px solid;
        display: inline-block;
        width: 200px;
        height: 200px;
        background: transparent url(https://jhcan333.github.io/can-Share/image/ie6/404.jpg) no-repeat center top;
        background-size: contain;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/ie6/404.jpg", sizingMethod='scale'); / * 6 * / effectively
        _background: none; / * 6 * / effectively
    }
</style>
Copy the code

3.2 HTML tags

<span class="pngSpan"></span>
<img class="pngImg" src="https://jhcan333.github.io/can-Share/image/ie6/404.png">
<span class="jpgSpan"></span>
<img class="jpgImg" src="https://jhcan333.github.io/can-Share/image/ie6/404.jpg">
Copy the code

3.3 Display Effect

1. Google Chrome

2. IE6

3.4 how do

IE6 does not support PNG background transparency or translucency, so images in the IMG tag will have a background color that requires CSS filters

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/404.png",sizi ngMethod='scale'); /*IE6 valid */ _background:none; / * 6 * / effectivelyCopy the code

In this case, first remove background and then use a CSS filter to set it. Attributes are preceded by the underscore “_”, which is only used in IE6.

3.5 Existing packaged methods

<script> function correctPNG() { var arVersion = navigator.appVersion.split("MSIE") var version = ParseFloat (arVersion[1]) if((version >= 5.5) && (document.body.filters)) {for(var j = 0; j < document.images.length; j++) { var img = document.images[j] var imgName = img.src.toUpperCase() if(imgName.substring(imgName.length - 3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if(img.align == "left") imgStyle = "float:left;" + imgStyle if(img.align == "right") imgStyle = "float:right;" + imgStyle if(img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale'); \"></span>" img.outerHTML = strNewHTML j = j - 1 } } } } function addHandler (element, type, Handler) {if (element.addeventListener) {// DOM2 level event handler, this points to the element itself. Element. AddEventListener (type, handler, false); } else if (element.attachevent) {// IE event handler, this points to window. Execute element.attachEvent("on" + type, handler) in the reverse order in which they were added; } else {// DOM0 level event handler. Element ["on" + type] = handler; } } addHandler(window,'load',correctPNG) </script>Copy the code

Just introduce this JS into the project

4. The display: inline-block in Internet Explorer 6 is abnormal

4.1 performance

An HTML element that is inline takes on the property of inline-block when set to inline-block. When an HTML element that is a block is set to inline-block, it will not be inline.

4.2 the code

<style type="text/css">
    .span-inline-block {
        background-color: #7FFFD4;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 5px;
    }

    .div-inline-block {
        background-color: #00ff00;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 5px;
    }
</style>
<span class="span-inline-block"></span>
<span class="span-inline-block"></span>
<span class="span-inline-block"></span>
<span class="span-inline-block"></span>
<div class="div-inline-block"></div>
<div class="div-inline-block"></div>
<div class="div-inline-block"></div>
<div class="div-inline-block"></div>
Copy the code

4.3 above,

1. Google

2.ie6

4.4 How?

1. If there are no special requirements, change the div to span. 2floatProperties. Such asfloatWhen it is right, the effect is as followsCopy the code

5. Min-height and min-width are invalid in Internet Explorer 6

5.1 the code

<style type="text/css">
    .min-div-class {
        min-width: 200px;
        min-height: 200px;
        background-color: #00FF00;
    }
</style>
<div class="min-div-class"></div>
Copy the code

5.2 Comparison diagram

1. Google

2. Ie6 (Yes, this is a blank map)

5.3 How to adjust?

Set width and height directly.

6. Select from IE6 would rather die than ╥﹏╥… Soft or hard! ヘ (; ´ Д ` ヘ)

6.1 what?

I was going to make the select box look nice, like this

Results in IE6 disorderly set, source CODE I will not write, write demo directly

6.2 the demo! My code!!

<style type="text/css">
    .selectArea{
        position: relative;
        width:100px;
        height:24px;
        line-height:20px;
        padding-left: 5px;
        border:1px  solid #0079cc;
        overflow: hidden;
    }
    .testSelect{
        width:150px;
        line-height:30px;
        margin: -3px 0px;
        border:0px solid transparent;
        outline: none;
        background: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance:none;
    }
    .dropdown{
        position: absolute;
        right:5px;
        top:10px;
    }
</style>
<div class="selectArea">
    <select class="testSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <img class="dropdown" src="https://jhcan333.github.io/can-Share/image/ie6/arrow.png">
</div>
Copy the code

6.3 Displaying each Browser

Google
ie8
ie6

6.4 Have you found that IE6 select is not obedient?

Height ~ border ~ completely not neat ~

6.5 How can I Solve the problem?

Just look neat on Ie6, no fancy stuff! Hash! (T_T)

<style type="text/css">
    .selectArea {
        position: relative;
        width: 100px;
        height: 24px;
        line-height: 20px;
        padding-left: 5px;
        border: 1px solid #0079cc;
        overflow: hidden;
        _border: 0px #fff solid;
        _padding: 0px;
        _overflow: auto;
    }

    .testSelect {
        width: 150px;
        line-height: 30px;
        margin: -3px 0px;
        border: 0px solid transparent;
        outline: none;
        background: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        _width: 100px;
        _margin: 0px;
    }

    .dropdown {
        position: absolute;
        right: 5px;
        top: 10px;
        _display: none;
    }
</style>
Copy the code

This is about the effect ~ (the original is also very neat ah)

Ie6 CSS issues on the first sorted out here, welcome to discuss commentsCopy the code

Recently, I am working on a public account related to front-end programmers. In addition to technology sharing, I have also added articles about career development and life records. Welcome to pay attention to, chat and ridicule together, work hard together and live seriously!