代码之家 › 专栏 › 技术社区 › Ravi21

FF和IE中的元素变形

css-position cross-browser responsive-design css html

Ravi21 · 技术社区 · 6 年前

我对网络开发非常陌生,试图自己建立一个公司网站,我只是遇到了一个问题,我的页面上有一个“红色信息框”。

它在Chrome上看起来很完美,但在Firefox和IE上,它看起来失真了,连着图片。

HTML

<html lang="en">   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
 integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
 crossorigin="anonymous">


     <!-- Custom CSS -->
     <link rel="stylesheet" href="resources/css/style.css">

     <!-- Custom FONTS -->
     <link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet">


      <!-- Favicon -->
     <link rel="icon" href="resources/images/logo.jpg" width:"100px">

      <!-- Title of Page-->
     <title>PC Handyman</title>   </head>





         <!-- Landing page Body-->

   <body id="landing-page">
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top  " id="spec">   <a class="navbar-brand" href="#">PC Handyman
 <img class="logopic" src="resources/images/logo.jpg" alt=""></a>  
 <button class="navbar-toggler" type="button" data-toggle="collapse"
 data-target="#navbarNav" aria-controls="navbarNav"
 aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item active">
         <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="services.html">Services</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="about.html">Why PC Handyman?</a>
             </li>
             <li class="nav-item">
               <a class="nav-link disabled" href="contact.html">Contact Us</a>
             </li>
           </ul>
         </div>
       </nav>

       <div class="pop">
         <p>Welcome to PC Handyman, East Auckland's friendliest PC repair service Lorem ipsum dolor sit amet, consectetur adipisicing
 elit. Assumenda, fugiat.</p>
       </div>



     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
 crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
 integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
 crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
 integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
 crossorigin="anonymous"></script>   </body> </html>

如果有人能阻止我的“redbox”在其他浏览器中失真的原因,我将不胜感激。

我肯定这和我的“流行音乐”课有关。

Weird result

Desired result

1 回复 | 直到 6 年前

Athul Nath 6 年前

这是你的css问题。将这些代码替换为 流行音乐 类将这些代码放入您的中。css文件

  div.pop {
     position: relative;
     z-index: 9999;
     margin: 0;
     top: 0;
     left: 0;
}
 div.pop p {
     background: red;
     border: 2px solid orange;
     position: absolute;
     right: 0;
     width: 30%;
     top: 20rem;
     color: #fff;
}