XHTML/CSS問題與像素差距

基本上GunChester我的項目我有#login_top（頂部圖像持有人）和3 CSS col的下面，#login_left，#login_centre和#login_right之間的幾個像素寬的差距，這樣我的第一個問題爲什麼？我該如何解決這個問題，這是FF，Chrome和IE。其次，BG圖像似乎重疊兩倍，如同在頂部拉伸，然後整個圖像顯示它應該。我確實有它的工作，但是當我嘗試修復像素缺口時，我必須搞砸了一些東西，但不知道是什麼，所以它現在變成了梨形，爲這兩種情況提供幫助:)？下面XHTML/CSS問題與像素差距

的CSS：

@charset "utf-8"; 
/* 
    Autoher: Chris Leah 
    Date: 20/04/2010 
    (C) GunChester.net/Chris Leah 

HTML and Body CSS */ 
html, body { 
    background-image: url(../images/home/bg.png); 
    background-repeat: repeat-x; 
    background-color: #070a12; 
    text-align: center; /* for IE */ 
    font-family: Verdana, Tahoma, Arial, sans-serif, Helvetica; 

} 

/* Wrapper div */ 
#wrapper { 

    margin: 0 auto; /* align for good browsers */ 
    text-align: left; /* counter the body center */ 
    height: auto; 
    width: 932px; 
    margin-top:100px; 
} 
/* Logo div inside wrapper div */ 
#wrapper #logo { 
    position: relative; 
    height: auto; 
    width: auto; 
    text-align: center; 
} 
/* Wrapper login top div */ 
#wrapper #login_top { 
    position: relative; 
    height: auto; 
    width: auto; 
    float: left; 
} 
/* Wrapper login left div */ 
#wrapper #login_left { 
    float: left; 
    width: 259px; 
    position: relative; 
} 
/* Wrapper login centre div */ 
#wrapper #login_centre { 
    height: 152px; 
    width: 385px; 
    float: left; 
    background-color: #181F37; 
    background-image: url(../images/home/login_area.png); 
} 
/* Wrapper login right div */ 
#wrapper #login_right { 
    float: right; 
    width: 277px; 
    position: relative; 
    margin-right: 11px; 
}

HTML下面網頁...

<!DOCTYPE html> 
<html> 
<head> 
<!-- Meta Info --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- Page title --> 
<title>GunChester - Free Online Gangster RPG!</title> 
<!-- Link in CSS and JS files --> 
<link href="../css/home.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<!-- Content wrapper div layer --> 
<div id="wrapper"> 
    <!-- Logo div layer --> 
    <div id="logo"> 
    <img src="../images/home/header.png" width="799" height="256" /> 
    </div> 
    <!-- Login top image div layer --> 
    <div id="login_top"> 
    <img src="../images/home/login_top.png" width="932" height="68" alt="Login Box Top Image" /> 
    </div> 
    <div id="login_left"> 
    <img src="../images/home/login_left.png" width="259" height="152" alt="Login Left Image" /> 
    </div> 
    <!-- Login centre div layer --> 
    <div id="login_centre"> 
    test 
    </div> 
    <!-- Login right image div layer --> 
    <div id="login_right"> 
    <img src="../images/home/login_right.png" width="277" height="152" alt="Login Right Image" /> 
    </div> 
</div> 
</body> 
</html>

來源

2010-04-21 Chris Leah

我會盡力，謝謝。 – 2010-04-21 10:52:41

頂部圖像下方的空間是基線與圖像所在文本行底部之間的距離。由於圖像是內聯元素，因此它們被視爲文本。您可以通過簡單地使圖像成爲塊元素來解決此問題：

#login_top img { display: block; }

您已經在html元素和body元素上設置了背景圖像。頂部圖像下方的浮動元素不會影響主體的大小，因此主體元素僅覆蓋部分頁面。結果是body元素重複了圖像的一部分，但被它的邊距（以及包裝的邊緣，因爲它在body元素之外摺疊）所抵消。從body元素刪除背景，以便只有html元素顯示它。

來源

2010-04-21 11:00:38 Guffa

要解決的第一個問題，請嘗試。（剛剛用FireBug測試過）。

#login_top { height:68px; }

來源

2010-04-21 10:54:25 kschaper

#login_top img {vertical-align:bottom;}

圖片默認爲vertical-align: baseline留下餘地文本信伸（P，Q，ECT）。

來源

2010-04-21 10:55:39 Emily

XHTML/CSS問題與像素差距

回答

相關問題