我正在尝试创建一个带有图像和文本的新闻栏。我可以让它在单个浏览器上正常工作，即(Chrome)，但如果我在 Firefox 中打开它，它会弄乱格式。这个问题有简单的解决方法吗？我不明白为什么代码不能在其他浏览器上运行？？
我已经包含了代码的链接，正如我所说的，这不适用于多浏览器。我可以摆弄它，让它只与一个一起工作。
谢谢。
HTML
<body>
<div id="newsBar">
<img src="website-myhero.png" align="left" name="Ian Thorpe" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
<div id="newsBar-text" style="margin:7px;"><a href="News.html" class="link"> BREAKING NEWS: Ian Thorpe who recently went under the knife is unlikely, according to offcials, to ever...</a>
</div>
<img src="wikimedia.png" align="left" name="Rio 2016" style="margin: 10px 0 0 10px; margin-right:5px;" height="80" width="80">
<div id="newsBar-text" style="margin: 14px 0 0 10px;"><a href="News.html" class="link"> Rio is to host the 2016 olympics games. The construction of the actual stadium is currently ...</a>
</div>
<img src="media-olympics-au.jpg" align="left" name="Stephanie Rice" style="margin:10px 0 0 10px; margin-right: 5px;" height="80" width="80">
<div id="newsBar-text" style="margin: -7px 0 0 10px;"><a href="News.html" class="link"> The Austrailian olympian, Stephanie Rice, has decided to hand in the towel this year. The three time olympic champion ...</a>
</div>
<img src="swimIreland-ie.jpg" align="left" name="UCD Race To Midnight" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
<div id="newsBar-text" style="margin: 18px 0 0 10px;"><a href="News.html" class="link">UCD recently hosted a charity swimming event in aid of Marymount university hospital and hospice. The event took place ...</a>
</div>
<img src="npr-org.jpg" align="left" name="M.Phelps" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
<div id="newsBar-text" style="margin: 18px 0 0 10px;"><a href="News.html" class="link">Micheal Phelps has annouced his retirement from the olympics this year, "I am getting older, and I do find it harder to recover." He said...</a>
</div>
<div id="newsBar-text" style="margin: 0 0 0 90px; font-size: 19px;"><a href="News.html" class="link"><br /><br />Read more news here</a>
</div>
</body>
CSS
#newsBar {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #104979), color-stop(100%, #5198d3));
background: -webkit-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -o-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -ms-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -moz-linear-gradient(top, #104979 0%, #5198d3 100%);
border-top: 1px solid #336699;
box-shadow: 1px 1px 5px -1px #000;
border-right: -5px;
height: 750px;
width: 350px;
opacity: 0.9;
z-index: 99;
margin: 0 0 0 0;
/* top, right, bottom, left */
}
#newsBar img {
margin-right: 5px;
margin-bottom: 5px;
}
#newsBar-text {
color: #ffffff;
font-family: serif;
font-size: 16px;
word-wrap: break-word;
}
#newsBar-titleBox {
height: 50px;
width:350px;
background-color: #0c4482;
border-bottom: 1px solid #092545;
box-shadow: 1px 1px 5px -1px #000;
margin: -455px 0 0 900px;
}
#newsBarTitle {
font-family: sans-serif;
float:left;
padding: 20px 10px 8px 10px;
font-weight: bold;
text-decoration: none;
color: white;
font-size: 18px;
letter-spacing: 2px;
}
最佳答案
首先 - 将内联 CSS 移动到样式表中，几乎没有冲突。其次，只需将您的图像向左浮动，向它们添加 clear:both，使每个图像都出现在一个新行上，然后更改一些边距，同时为文本设置宽度 - 瞧!
Demo Fiddle
HTML
<body>
<div id="newsBar">
<img src="website-myhero.png" />
<div id="newsBar-text"><a href="News.html" class="link"> BREAKING NEWS: Ian Thorpe who recently went under the knife is unlikely, according to offcials, to ever...</a>
</div>
<img src="website-myhero.png" />
<div id="newsBar-text"><a href="News.html" class="link"> Rio is to host the 2016 olympics games. The construction of the actual stadium is currently ...</a>
</div>
<img src="website-myhero.png" />
<div id="newsBar-text"><a href="News.html" class="link"> The Austrailian olympian, Stephanie Rice, has decided to hand in the towel this year. The three time olympic champion ...</a>
</div>
<img src="website-myhero.png" />
<div id="newsBar-text"><a href="News.html" class="link">UCD recently hosted a charity swimming event in aid of Marymount university hospital and hospice. The event took place ...</a>
</div>
</div>
</body>
CSS
#newsBar {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #104979), color-stop(100%, #5198d3));
background: -webkit-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -o-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -ms-linear-gradient(top, #104979 0%, #5198d3 100%);
background: -moz-linear-gradient(top, #104979 0%, #5198d3 100%);
border-top: 1px solid #336699;
box-shadow: 1px 1px 5px -1px #000;
border-right: -5px;
height: 750px;
width: 350px;
opacity: 0.9;
z-index: 99;
margin: 0 0 0 0;
/* top, right, bottom, left */
}
#newsBar img {
margin: 10px 5px 0 10px;
height:80px;
width:80px;
float:left;
clear:both;
}
#newsBar-text {
color: #ffffff;
font-family: serif;
font-size: 16px;
width:230px;
margin:10px;
float:right;
}
关于左侧为 HTML/CSS 图像，右侧为文本。多浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23106384/