【问题标题】:Having problems with Safari <img src> cssSafari <img src> css 有问题
【发布时间】:2011-07-12 17:21:26
【问题描述】:

我目前已对所有前端设计进行了编码,以便在 Chrome 中 100% 正确工作。现在我正在进行跨浏览器测试和修复错误。我在 Safari 中遇到了一个奇怪的错误,图像无法正确显示。看一下 HTML:

<li class="newsfeedlist-item">
<div class="questionslogo"</div>
<div class="newsfeedlist-image">
<img src="http://images.ted.com/images/ted/2ade6b48aac1eb21b7b90fe43335a8e70771455c_50x50.jpg"></div>
<div class="newsfeedlist-content">
<h3><b><a href="#">What Is The Best Way To Become A Photographer? </a></b></h3>
<div class="newsfeedlist-bodytext"> What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???</div>  
<div class="newsfeedlist-questionauthor"> <i>Started By <a href="#">Robert Sopel</i></a></div>
</div>
</li>

你会注意到这是一堆简单的 div,所有引用的脚本都来自 CSS。 Safari 中的错误(在我看来)不是来自 CSS,而是来自 html 中的“img src”标签。但这里是“newsfeedlist-image”和“questionslogo”的 CSS,它们都有错误:

.questionslogo {
width: 84px;
background: url(images/questions.png) top left no-repeat;
padding: 8px 0px 0px 100px;
float: left;
}

.newsfeedlist-image {
width: 48px;
float: left;
}

请注意,我已尝试为两者和 display: 块修复高度,但这并没有改变在 Safari 中无法识别图像的事实(您无法单击并拖动它,它只是悬停在它)请参阅下面的屏幕截图。

铬:

http://www.cl.ly/3f1Z143b3X0V1N1i1b1c

火狐:

http://www.cl.ly/471R002N3v182q2W1V1j

最后是 Safari:

http://www.cl.ly/1X3H2W1A1V3b0G3V2n0G

我认为这是一个简单的修复,但现在无法解决。将不胜感激任何帮助。谢谢!!!

【问题讨论】:

    标签: html css safari image


    【解决方案1】:

    问题是这部分,你有一个错字:

    <div class="questionslogo"</div>
    

    通过添加&gt; 来修复它:

    <div class="questionslogo"></div>
    

    要自己查找此类错误,最好使用以下代码验证您的 HTML:http://validator.w3.org/


    我还注意到你也有:

    <i>Started By <a href="#">Robert Sopel</i></a>
    

    您关闭标签的顺序错误,应该是:

    <i>Started By <a href="#">Robert Sopel</a></i>
    

    【讨论】:

    • 嗯很好的建议,谢谢 - 愚蠢的错误:D。下次我会验证。添加“>”之后,所有浏览器都搞砸了,但现在这是一个 CSS 问题,我要解决这个问题。谢谢!
    • 这是我写的第一个代码,而且很丑。我想我会用花车重做它,做得很好。谢谢
    • 谢谢,你的观点让我重做了整个部分。它砍掉了大约 50 行代码,并且可以跨浏览器工作,所以谢谢! :)
    猜你喜欢
    • 1970-01-01
    • 2016-05-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-29
    • 2015-08-18
    • 2018-08-29
    相关资源
    最近更新 更多