DIV Displays Wider в IE8 работает с FireFox, Safari, совместимостью с IE8. Режим

Недавно я попытался добавить строку «Иконки социальных сетей» внутрь веб-сайта. После создания DIV и применения свойств все выглядит нормально в режиме совместимости с FireFox, Safari и Internet Explorer 8.

Однако при просмотре страницы в IE8 DIV выглядит на один пиксель шире с правой стороны. Также увеличение увеличения в IE8 до 105% решает проблему, но, по моим оценкам, это вряд ли удовлетворительное решение.

URL веб-сайта: http://MikeChurch.com

Каскадная таблица стилей (CSS)

    #wrapper{

ширина: 960 пикселей; маржа: авто; }

    #banner{

ширина: 100%; плыть налево; }

    #socialMedia{
      background:#000000 no-repeat right top;
      border-bottom:5px solid white;
      border-left:5px solid white;
      border-right:5px solid white;
      overflow:hidden;
      float:left;
      width:99%;

}

   #wrap-container{

ширина: 100%; плыть налево; фон: #fff; }

   #innerpad{

ширина: 950 пикселей; плыть налево; отступ: 0px 5px 5px 5px;

HTML

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
include_once (dirname(__FILE__).DS.'/tmp_vars.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?
>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?  
>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/layout.css"   
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/modules.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" 
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/joomla.css" 
type="text/css" />

<script type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?
>/js/jb.script.js"></script>

<!--[if lte IE 6]>
<script type="text/javascript">
var siteurl = '<?php echo $tmpTools->baseurl();?>';

window.addEvent ('load', makeTransBG);
function makeTransBG() {

fixIEPNG($$('img')); fixIEPNG ($$('#banner-top'), '', 'scale', 0, 2); fixIEPNG ($$('#banner'), '', 'scale', 0, 2); fixIEPNG ($$('#banner-bottom'), '', 'scale', 0, 2);

 }
 </script>

 <style type="text/css">
 .clearfix {height: 1%;}
 img {

граница: нет; } templateurl (); ?

/css/template_ie6.css "type =" text / css "/>

 <![endif]-->

 <!--[if gte IE 7.0]>
 <style type="text/css">
 .clearfix {display: inline-block;}
 </style>
 <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
 >/css/template_ie7.css" type="text/css" />        

 <![endif]-->
 <!--[if gte IE 8.0]>
 <style type="text/css">
 .clearfix {display: inline;}
 </style>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
 >/css/template_ie8.css" type="text/css" />        

 <![endif]-->
 </head>
 <body id="bg">
 <div id="wrapper">

 <a target="_blank" href="http://twitter.com/thekingdude"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/twitter.jpg" title="Follow Mike on Twitter" alt="Follow Mike on Twitter" align="right" style="border:0"></a>

 <a target="_blank" href="http://www.facebook.com/#!/TheKingDude?ref=ts"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/facebook.jpg" title="Find Mike on Facebook" alt="Find Mike on Facebook" align="right" style="border:0"></a>

 <a target="_blank" href="http://feeds.feedburner.com/MikechurchcomRssFeed"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss.jpg" title="MikeChurch.com RSS Feed" alt="MikeChurch.com RSS Feed" align="right" style="border:0"></a>

 <div style="float:right;vertical-align:middle;">
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?       
 uri=MikechurchcomRssFeed&amp;loc=en_US"><span style="color:white; vertical-
 align:super">Keep up with the King Dude via eMaill RSS</span><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss_email.jpg" 
 title="Subscribe to MikeChurch.com RSS Feed by Email" alt="Keep up with the King Dude 
 via RSS email" style="border:0"></a></div>
  </div>
 <div id="innerpad">
     <div id="wrap-topnav">
         <div id="topnav">
             <jdoc:include type="modules" name="topnav" />
            </div>
            <?php if( $this->countModules('search') ){?>
            <div id="search-mod">
             <div class="padding">
              <jdoc:include type="modules" name="search" />
 </div>

* Примечание: я попытался разместить DOCTYPE как самый первый элемент в HTML-файле, но это не дало результата.


person Allison    schedule 11.09.2010    source источник


Ответы (1)


Что там происходит, так это то, что вы сказали width = '99% ', что, как мне кажется, подлежит некоторому округлению, и IE8 предлагает 1 дополнительный пиксель. Вы использовали другую технику для div ниже, чтобы получить белое поле - отступ. В div для социальных сетей вы использовали белые границы шириной 5 пикселей. IE учитывает ширину границы в общей ширине контейнера, поэтому, если вы скажете width = 100%, она была бы на 10 пикселей шире, поэтому я думаю, вы выбрали 99%, чтобы сделать ее максимально приближенной к правильной ширине.

Я предлагаю вам либо использовать ту же технику, что и в div "innerpad" (отступы), либо использовать абсолютную ширину 950 пикселей, а не относительную.

person CyberDude    schedule 11.09.2010
comment
Большое спасибо за то, что нашли время ответить. Мои способности заключаются в дизайне, но я пытаюсь изучить CSS, чтобы не быть небрежным программистом. Так что да, добавление 100% ширины сделало ‹Div› справа шире в FireFox, но нормально в IE, так что меня это очень расстраивало. Однако, основываясь на вашей рекомендации, это обновленный CSS: - person Allison; 14.09.2010
comment
#socialMedia {background: # 000000 справа вверху без повтора; нижняя граница: сплошной белый цвет 5 пикселей; border-left: сплошной белый цвет 5 пикселей; border-right: сплошной белый цвет 5 пикселей; переполнение: скрыто; } - person Allison; 14.09.2010
comment
Я посмотрел на действующий сайт, и в этой области он выглядит нормально. Так ли это? - person CyberDude; 15.09.2010