Question

我是一名CSS新手，但我已经搜索过网络，无法找到解决问题的方法。我无法公开发布指向我网站的链接，因此我复制了以下相关代码。

我正在网站上工作，无法以任何方式更改HTML。它由链接到复杂数据库的PHP应用程序自动生成。但是，我可以上传要在标题中显示的图像。 PHP程序自动生成HTML。

问题在于标题图片。该图像是网站横幅/徽标。但是，我需要在除主页之外的所有页面上都使用标题。因此，将其按gimp调整为较小的像素大小，并使用<body id="home">作为选择器来增加其大小。

我还在我的css代码中插入了调整大小算法以防止模糊。我不认为重新调整大小的css对大小和位置问题有任何影响，但我将代码包含在案例中

标题在所有浏览器的辅助页面上运行良好，但主页在Chrome，Safari和IE7上严重破坏。它在Firefox和IE8上运行良好。这是一个如此奇怪的模式，我在网上找不到太多帮助。

在IE7中，图像位于正确的位置，并且清晰，但应该是它的两倍。在safari和chrome中，图像从标题div向下移动，覆盖其他内容，并且非常严重失真。

标题中还有一个搜索div，它工作正常。我使用css将搜索div移出主页上的标题区域。我缩写了相关的HTML，因为它工作正常，但我把它包含在内，这样你才能理解标题的完整div结构。

HTML：

<body id="home">
<div id="wrap">
    <div id="header">
        <div class="center-div">

<div id="search-container">
    <form id="simple-search" action="/items/browse" method="get">
        <fieldset><input /><input/></fieldset></form>
    <a href="/items/advanced-search">Advanced Search</a></div>

<div id="site-title">
  <a href="http://sitename.org" ><img src="http://image_host.png" title="site name" /></a>
            </div>
        </div>
    </div>

CSS：

#home #site-title img{
width: 200%;
height: 200%;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;}

#home #header{
min-height: 130px;}

div#header > div.center-div {
position: relative;}

 #search-container, #search a{
   float: none;
   text-align: center;
   margin-bottom: 30px;
   text-decoration: underline;
   margin-top: 15px;
   margin-left: 50%;
   font-size: 1.5em;}


#home #search-container, #home #search a{
width: 100%;
height: 100%;
margin-top: 360px;
margin-left: -12px;
font-size: 2em;
    position: absolute;}

对于长篇大论的帖子感到抱歉，但我非常迫切需要帮助，我想确保提供所有相关信息。我真的不知道发生了什么。我为一个非盈利组织工作，我的培训是在图书馆和档案馆，而不是网页设计。但是为了我们的项目工作，我现在正在做CSS！

感谢您提出的任何建议

恭 CAMC

Answer 1

请尝试使用精确的像素大小：

，而不是使用图像的百分比

#home #site-title img{
width: 200px;
height: 200px;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;}

图像在浏览器中调整大小

1 个答案: