MozTW 討論區 • 檢視主題 - [已解決] 有關背景圖片在IE與FF顯示不同的問題

所有顯示的時間為 UTC + 8 小時

[已解決] 有關背景圖片在IE與FF顯示不同的問題

第 1 頁 (共 1 頁)

[ 4 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

Renian

文章主題 : [已解決] 有關背景圖片在IE與FF顯示不同的問題

發表於 : 2008-11-29, 21:47

我在寫blogger的面板的時候遇到了一個問題

這是在FF看的情況

這是在IE看的情況

我想可能是我在DIV的設定上有問題，但是我找不到問題點

這是我的原始碼，這邊是header的設定

代碼:

/* Header
----------------------------------------------- */
#header-wrapper {
  width: 1000px;
  height: 250px;
  background: url('http://renian1987.googlepages.com/headerBG.jpg');
  margin: 0 auto;
  text-align: left;
}
#header {
  margin: 0;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

h1.title {
  padding-top: 35px;
  margin: 0 10px .1em;
  line-height: 1.5em;
  font-size: 100%;
}

h1.title a, h1.title a:visited {
  visibility:hidden;
  color: $headerTextColor;
  text-decoration: none;
}
h1.title a:hover {
  color: $headerTextColor;
  text-decoration: underline;
}

#header .description {
  display: block;
  margin: 0 0 .1em 0;
  padding: 0 15px 5px 15px;
  line-height: 1.5em;
  font-size: 50%;
}

#header h2 {
   line-height: 1.5em;
   font-size: 80%;
   margin-top: 0;
   margin-right: 10px;
   margin-bottom: 0.1em;
   margin-left: 10px;
}
#header  .widget-content {
   display: block;
   line-height: 1.5em;
   font-size: 50%;
   padding: 0 15px 5px 15px;
        margin: 0 0 .1em 0;
}

這邊是mian

代碼:

#content-wrapper {
  background: $mainBgColor url('http://renian1987.googlepages.com/contentBG.jpg') repeat-y top left;
  width: 1000px;
  margin: 0 auto;
  padding: 0px;
  text-align: left;

}
#main-wrapper {
  width: 540px;
  margin: -160px 20px 0px 20px;
  float: left;
  /*background-color: $mainPostColor;*/
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
/*IE6專用*/
* html #main-wrapper {
  width: 540px;
  margin: -140px 10px 0px 10px;
  float: left;
  /*background-color: $mainPostColor;*/
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-main-wrapper {
  padding: 0px;
  width: 380px;
  margin: -60px 0px 0px 0px;
  float: right;
  /*background-color: $sidebarBGColor;*/
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper-left {
  width: 155px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
  width: 215px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper-left h2{
background:url(http://renian1987.googlepages.com/sidebar-left.jpg) no-repeat;
padding:15px 0 10px 0;
}
#sidebar-wrapper h2{
background:url(http://renian1987.googlepages.com/sidebar-right.jpg) no-repeat;
padding:15px 0 10px 0;
}

這邊是div

代碼:

<body>
  <div id='outer-wrapper'><a name='TOP'/>
   <!-- skip links for text browsers -->
   <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
   </span>
<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Mini＊Vanilla (標頭)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
<div id='content-wrapper'>
<div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'/>
</b:section>
</div>

<div id='sidebar-main-wrapper'>
   <div class='sidebar widget g-search' id='g-search'>
      <h2 class='title'>Search</h2>
      <div class='widget-content'>
      <!-- SiteSearch Google -->
......