Question

在IE特定的CSS文件中，文本堆叠在其自身之上。见 see here

这仅发生在IE中，而不是在任何其他浏览器中。这是IE特定的css

h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative !important;
top:-150px !important;
left:-250px !important;
color: black;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative !important;
top:150px !important;
left: 100px !important;
}
.image2 {
position: relative !important;
bottom:100px !important;
left: 100px !important;
}
.box1 {
width: 100%;
height: 5px;
background-color:  #FC3B3B;
position: relative !important;
bottom:0px !important;
left: 0px !important;
}
p {
position: relative !important;
bottom:0px !important;
left: 0px !important;
font-size: 15px;
font-family: arial;
color: #585858;
}

我怎样才能阻止这种情况发生。它开始发生，因为我添加！重要但是如果我删除它然后我不能定义位置

修改。继承了我页面的HTML部分

  <!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future  </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->

</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: absolute;
top:-100px;
left: 400px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: absolute;
top:150px;
left: 400px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: absolute;
top:200px;
left: 500px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: absolute;
top:300px;
left: 400px;
}
.image2 {
position: absolute;
top:370px;
left: 600px;
}
.box1 {
width: 100%;
height: 5px;
background-color:  #FC3B3B;
position: absolute;
top:560px;
left: 0px;
}
p {
position: absolute;
top:600px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>


<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE<h1> 
<h2>COMING SOON... <h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
</div>
<div class="box1">

</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>

Answer 1

    <!DOCTYPE html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
    <title>Louis Moore | Creating The Future  </title>
    </head>

   <style>
       .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }

    * html .clearfix {
        height: 1%;
    }

    .box {
    width:100%;
    }
    .images{
    background-color: #F1F2F2;
    border: 1.5px #D1D3D4 solid;
    height:450px;
    width:100%;
    }
    .image1 {
    margin:auto;
    display:block;


    }
    body{
    font-family: 'Paytone One', sans-serif;
    font-size: 30px;
    }
    h1 {
    font-family: 'Paytone One', sans-serif;
    font-size: 40px;
    text-align:center;
    padding-top:25px;
    color:#ddd;

    }
    h2 {
    font-family: 'Paytone One', sans-serif;
    font-size: 30px;
    text-align:center;
    color:red;
    }
    h3 {
    font-family: 'Paytone One', sans-serif;
    font-size: 20px;
    text-align:center;
    color:red;
    }
    .image2 {

    }
    .box1 {
    width: 100%;
    height: 5px;
    background-color:  #FC3B3B;

    }
    p {

    font-size: 15px;
    font-family: arial;
    color: #585858;
    }

   </style>
    <body>
    <div class="box clearfix">
    <div class="images">
    <img src="fashion2.jpg" class="image1" alt="." width="400px" height="400px">
    </div>
    <h1> WELCOME TO MY PAGE</h1> 
    <h2>COMING SOON... </h2>
    <h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
    <a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
    </div>
    <div class="box1 clearfix">

    </div>
    <div class="clearfix">
    <p>louismoore.net © All rights reserved 2012</p>
    </div>
    </body>
    </html>

    Use this HTML code,

    And use this css code and no need extra css for IE

文本堆叠在自身之上

1 个答案: