Question

标题解释了所有，我无法看到这个问题是什么，我怀疑可能是CSS的问题，但它在IE和Firefox中看起来很好，我不明白为什么chrome正在挣扎？

我尝试过添加

#logo img
{
width: 50%;
float:left;
}

要尝试直接设置图像样式，仍然没有运气

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>

<body>
<div id="header"> 
<div id ="logo">
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
</div>

<div id="icons">
    <img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
    <p>M015734a@student.staffs.ac.uk</p>
    <div class="clear">     
    </div>
    <img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
    <p> 07904921417</p>
    <div class="clear">     
    </div>
    <img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
        <p>Stafford, UK</p>
    <div class="clear">     
    </div>              
<div class="clear">     
</div>
</div>
</div>

<nav>
<div id ="NavBG">
safsafnsakn
</div>
</nav>
</body>
</html>

#logo
{
    width: 50%;
    float:left;

}

#logo img
{
    width: 50%;
    float:left;
}

Answer 1

这个问题似乎有一个解决方法。您可以尝试使用<object>代替<img>

<object height="100%" width="100%" data="Media/Images/logo.svg" type="image/svg+xml">
</object>

有关详细信息，请参阅以下链接。

http://e.metaclarity.org/52/cross-browser-svg-issues/
http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

Answer 2

您不能只将CSS附加到文件的末尾。它必须是内联的，包含在外部文件中，或放在头部的style标记内。

尝试将CSS移动到头部，如下所示：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
<style>
#logo
{
    width: 50%;
    float:left;

}

#logo img
{
    width: 50%;
    float:left;
}
</style>
</head>

如果您无法解决Chrome中未显示徽标的问题，请在JSFiddle中重新创建文件，并附上图片和外部css.css文件，然后在此处发布链接。

Answer 3

请使用不同类型的图像。检查链接

http://code.google.com/p/chromium/issues/detail?id=119693

Answer 4

您的问题可能在img标记中：

<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />

您不能使用“height”或“width”属性指定单位 - 我只是完全删除它们并使用CSS设置图像样式。

Answer 5

从

link rel="icon" type="image/x-icon" href="/favicon.ico"

更改您的代码至

link rel="icon" type="image/x-icon" href="/favicon.png"

还要将图像重命名为.png。由于Chrome有时候不会选择ico图标。它对我有用。

无法在Google Chrome中看到徽标，但可以在IE和Firefox中看到徽标

5 个答案: