html - 图片显示在不同的地方取决于浏览器

Question

我正在使用 HTML 和 CSS 构建一个非常简单的网站。它由一个标题、一段文字和一张图片组成。

当我在 Chrome 上查看该网站时，所有三个对象的放置都完美无缺。但在 Firefox 和 Safari 中，它们是困惑的。然后，当我针对这两者之一进行优化时，Chrome 版本看起来不合适。等等

这是 CSS:

img {
position: fixed;
bottom: 280px;
right: 800px;
}

和 HTML:

 <img src="bob.jpg" height="50%" width="20%">

有没有相对简单的方法来解决这个问题？我可以根据浏览器指定位置吗？

 img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
 /* Firefox
 bottom: 200px;
right: 800px;
}

等等

第二个问题:我可以为图像分配什么属性，以便文本始终环绕图像，而不是呈现在图像的前面或后面？

谢谢!

Answer 1

如果您希望图像居中并与页面内容对齐，则无需添加任何额外的 CSS，因为您有 text-align: center添加到 body .

图像将居中，因为它是一个内联元素。此外，您的代码有很多问题，请考虑简化版本:

body {
  background-color: white;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
}

p {
  text-align: left;
  font-size: 12px;
  max-width: 50%;
  margin: 0 auto;
}

hr {
  width: 50%;
  margin: 3em auto;
}

<div class="marquee">
  <h3>THE X-FILES EPISODE GENERATOR</h3>
  <hr>
  <p>Make your own episode!</p>
  <p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
  <hr>
  <div class="wrap">
    <button onclick="sentenceLoad()">Generate</button>
  </div>
  <div class="container">
    <h5></h5>
  </div>
  <img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>

• 使用 CSS 边距而不是重复 <br>标签
• 无需重新定义字体，因为它继承自 body
• 将 CSS 规则添加到外部文件而不是内联(例如 <hr>)
• 使用margin: 0 auto居中 block 级元素，如 <p>

jsFiddle:https://jsfiddle.net/azizn/d1xmv65m/