Question

我试图在旁边有一个带有图像和文字的新闻栏。我可以使用单个浏览器（即Chrome）正常工作，但如果我在Firefox中打开它会弄乱格式。这个问题有一个简单的解决方案吗？我不明白为什么代码不能在另一个broswer上工作？

我已经包含了代码的链接，因为我说这不起作用。我可以摆弄它，使它只与一个人合作。

感谢。

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;
}

Answer 1

首先，将内联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图像，右侧是文本。多浏览器

1 个答案:

Demo Fiddle