您在這裡

IE 圖片 margin後,有白色區塊(css img margin)

Webster H.'s 的頭像
Webster H. 在 2015-04-26 (周日) 14:28 發表

Hello大家好,

問一個主要應該是CSS的問題,試了很久但一直測不出要怎麼修改,所以上來請問各位英明的大神們

我用了danland版型,在preface的地方我自己加入了一些CSS

主要是使用views slideshow做了一個幻燈片的效果

我把圖片往右邊margin了90px

在Chrome Firefox看起來都沒問題

但是在IE(相容性檢視)下,就會出現白色的底

不曉得有沒有人知道該怎麼讓這個白色的底"消失"

應該加上什麼語法呢@@?

還是我應該用其他的方式,讓我的圖片靠邊站(不用margin的方式)

請教各位大大了

page.tpl.php裡面的語法是這樣的

 <?php if($page['preface_first'] || $page['preface_middle'] || $page['preface_last']) : ?>
    <div style="clear:both"></div>
    <div id="preface-wrapper">
    <div id="preface-inner" class="in<?php print (bool) $page['preface_first'] + (bool) $page['preface_middle'] + (bool) $page['preface_last']; ?>">
          <?php if($page['preface_first']) : ?>
          <div class="columnA">
            <?php print render ($page['preface_first']); ?>
          </div>
          <?php endif; ?>
          <?php if($page['preface_middle']) : ?>
          <div class="columnB">
            <?php print render ($page['preface_middle']); ?>
          </div>
          <?php endif; ?>
          <?php if($page['preface_last']) : ?>
          <div class="columnC">
            <?php print render ($page['preface_last']); ?>
          </div>
          <?php endif; ?>
      <div style="clear:both"></div>
    </div>
    </div>
    <?php endif; ?> <?php if($page['preface_first'] || $page['preface_middle'] || $page['preface_last']) : ?>
    <div style="clear:both"></div>
    <div id="preface-wrapper">
    <div id="preface-inner" class="in<?php print (bool) $page['preface_first'] + (bool) $page['preface_middle'] + (bool) $page['preface_last']; ?>">
          <?php if($page['preface_first']) : ?>
          <div class="columnA">
            <?php print render ($page['preface_first']); ?>
          </div>
          <?php endif; ?>
          <?php if($page['preface_middle']) : ?>
          <div class="columnB">
            <?php print render ($page['preface_middle']); ?>
          </div>
          <?php endif; ?>
          <?php if($page['preface_last']) : ?>
          <div class="columnC">
            <?php print render ($page['preface_last']); ?>
          </div>
          <?php endif; ?>
      <div style="clear:both"></div>
    </div>
    </div>
    <?php endif; ?>

CSS的部分是這樣

#preface-wrapper {
  background:url(images/column.png) repeat-x #fff;
}

#preface-inner {
  width:920px;
  margin:5px auto 0;
}

#preface-inner .columnA {
  float: left;
  width: 290px;
  text-align: center;
}

#preface-inner .columnB {
  float: left;
  width: 290px;
  margin: 0 25px;
  text-align: center;
}

#preface-inner .columnC {
  float: left;
  width: 290px;
  text-align: center;
}

#preface-inner img {
  border-radius: 8px;
  margin: 10px 0 0 85px;
}