html - IE(边缘)和谷歌浏览器中的图像对齐方式发生了变化

Question

我一直在创建这个网站，并且进展顺利。然后我试着给它添加一个模态，但一切都有点走下坡路。问题是在添加模式后，Chrome 中的图像对齐方式发生了变化。它在 Edge 中运行良好。现在我知道这可能是因为 IE 可能不支持我添加的任何元素，因此看起来没问题。这里显示的第一张图片是在 IE 中，我希望它看起来像什么

第二张图片是它在谷歌浏览器上的样子

这里是图片相关的Html

<div class="coverimage">
  <img src="https://imgur.com/cHmH0K5" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
  <h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
  <div class="submovies" style="float:left;">
    <img src="https://imgur.com/GmqzA9C" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
    <img src="https://imgur.com/WGLHxcf" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;">
    <h4 id="upcoming1"><span> ANT-MAN AND THE WASP</h4>
    <span id="subspan1"> IN THEATERS 10TH JULY</span></span>
    <h4 id="upcoming2"><span> SKYSCRAPER</h4>
    <span id="subspan2"> IN THEATERS 13TH JULY</span></span>
    <h4 id="upcoming3"><span> The EQUALIZER 2</h4>
    <span id="subspan3"> IN THEATERS 20TH JULY</span></span>
    <h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</h4>
    <span id="subspan4"> IN THEATERS 13TH JULY</span></span>
  </div>
  <img src="https://imgur.com/cHmH0K5" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
  <img src="https://imgur.com/hcIgMdJ" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>

这是与这些图像对齐相关的 CSS。

.coverimage {
  position: relative;
  padding-bottom: 10px;
  background-color: #06c6da;
  padding-top: 10px;
}

.description {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #000;
  color: #FFF;
  padding-left: 20px;
  padding-right: 20px;
}

h2 {
  position: absolute;
  top: 180px;
  left: 910px;
  width: 100%;
  font-size: 40px;
  color: #FFF;
}

h2 span {
  color: #FFF;
  display: inline-block;
  background: rgba(0, 0, 0, 0.7);
  padding: 48px 48px 48px 20px;
}

.submovies {
  position: relative;
}

#upcoming1 {
  position: absolute;
  top: 300px;
  left: 20px;
  width: 100%;
  color: #FFF;
  font-weight: Bold;
  font-size: 18px;
}

#subspan1 {
  position: absolute;
  top: 340px;
  left: 20px;
  width: 100%;
  color: #FFF;
  font: lighter;
  font-size: 12px;
}

#upcoming2 {
  position: absolute;
  top: 300px;
  left: 620px;
  width: 100%;
  color: #FFF;
  font-weight: Bold;
  font-size: 18px;
}

#subspan2 {
  position: absolute;
  top: 340px;
  left: 620px;
  width: 100%;
  color: #FFF;
  font: lighter;
  font-size: 12px;
}

#upcoming3 {
  position: absolute;
  top: 110px;
  left: 920px;
  width: 100%;
  color: #FFF;
  font-weight: Bold;
  font-size: 18px;
}

#subspan3 {
  position: absolute;
  top: 150px;
  left: 922px;
  width: 100%;
  color: #FFF;
  font: lighter;
  font-size: 12px;
}

#upcoming4 {
  position: absolute;
  top: 300px;
  left: 920px;
  width: 100%;
  color: #FFF;
  font-weight: Bold;
  font-size: 18px;
}

#subspan4 {
  position: absolute;
  top: 340px;
  left: 920px;
  width: 100%;
  color: #FFF;
  font: lighter;
  font-size: 12px;
}

这是我最近添加的模态 HTML

<div class="feedback">
  <button type="button" id="feedbacksubmit"onclick="">Give us your FeedBack !</button>
</div>
<div  class="feedback-background">
  <div class="feedback-content">
    <div class="close">+</div>
    <img src="https://imgur.com/vm4mf6W" alt="Givefeedback" style="width:100px;height:100px;">
    <form action="">
      Name:
      <input type="text" placeholder="Name">
      E-Mail:
      <input type="text" placeholder="E-mail">
      What do you think about us?<br>
      <textarea rows="6" cols="33" "name="comment"></textarea>
      <br>
      How would you rate us ?
      <br>
      <label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
      <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
      <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
      <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
      <label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
      <br>
      <a href="#" id="btn1">SUBMIT</a>
    </form>
  </div>
</div>

这是与它相关的 CSS

.feedback-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.feedback-content {
  width: 500px;
  height: 550px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  position: relative;
}

input {
  width: 50%;
  display: block;
  margin: 10px 0px;
}

label {
  display: block;
}

input[type="radio"] {
  width: auto;
  display: inline;
}

.close {
  position: absolute;
  top: 0px;
  right: 14px;
  transform: rotate(45deg);
  font-size: 42px;
}

#feedbacksubmit {
  margin-left: 600px;
  margin-bottom: 50px;
  background-color: #484848;
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  color: white;
  outline: none;
}

Answer 1

你的页面有点灾难...(^_^;) 完全没有响应。你必须努力学习才能理解，例如，flots 是如何工作的，或者绝对位置如何与其相对 block 一起工作。内联样式是 Css 的老派，如果可能的话，您必须避免使用它们(这里是可能的!)。

但是，我对齐了您发布的每张图片，但是请(请!!)重做。考虑在 2018 年的网页中使用 flexbox 或 grid 来转换你的页面。

向您致以最诚挚的问候，您的学习和网页设计师事业! ;)

.coverimage{
position:relative;
padding-bottom:10px;
background-color:#06c6da;
padding-top:10px;
}

.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color:black;
color: white;
padding-left: 20px;
padding-right: 20px;
}


h2 { 
position: absolute; 
top: 180px; 
left: 910px; 
width: 100%; 
font-size:40px;
color:white;
}

h2 span { 
color: white; 
display:inline-block;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding:48px;
padding-left:20px;

 }
.submovies{
  position:relative;
  }

#upcoming1 { 
position: absolute;
top: 300px; 
left: 20px; 
width: 100%; 
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan1{
position: absolute; 
top: 340px; 
left:20px; 
width: 100%;
color:white;
font:lighter;
font-size:12px;

}



#upcoming2
 { 
 position: absolute; 
 top: 300px; 
 left: 620px; 
 width: 100%; 
 color:white;
 font-weight:Bold;
 font-size:18px;
  }

#subspan2{
position: absolute; 
top: 340px; 
left:620px; 
width: 100%;
color:white;
font:lighter;
font-size:12px;
}

#upcoming3 { 
position: absolute;
top: 110px; 
left: 920px; 
width: 100%; 
color:white;
font-weight:Bold;
font-size:18px;
}

#subspan3{
 position: absolute; 
top: 150px; 
left:922px; 
width: 100%;
color:white;
font:lighter;
font-size:12px;
}

#upcoming4 { 
position: absolute;
top: 300px; 
left: 920px; 
width: 100%; 
color:white;
font-weight:Bold;
font-size:18px;
}

#subspan4{
position: absolute; 
top: 340px; 
left:920px; 
width: 100%;
color:white;
font:lighter;
font-size:12px;
}

<div class="coverimage">
                    <img src="https://imgur.com/cHmH0K5.jpg" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">

                    <h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
            </div>

            <div class="container">
                <div class="submovies" style="float:left;width:1449px">

                    <img src="https://imgur.com/GmqzA9C.jpg" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
                    <img src="https://imgur.com/WGLHxcf.jpg" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;float:left;">

                    <h4 id="upcoming1"><span> ANT-MAN AND THE WASP</span></h4><span id="subspan1"> IN THEATERS 10TH JULY</span>
                    <h4 id="upcoming2"><span> SKYSCRAPER</span></h4><span id="subspan2"> IN THEATERS 13TH JULY</span>
                    <h4 id="upcoming3"><span> The EQUALIZER 2</span></h4><span id="subspan3"> IN THEATERS 20TH JULY</span>
                    <h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</span></h4><span id="subspan4"> IN THEATERS 13TH JULY</span>

                

                <div style="float:left">
                    <img src="https://imgur.com/cHmH0K5.jpg" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
                    <img src="https://imgur.com/hcIgMdJ.jpg" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
                </div>  
            </div>  

   </div>