DIV Displays Wider в IE8 работает в FireFox, Safari, IE8 compat.Режим - PullRequest
0 голосов
/ 12 сентября 2010

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

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

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

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

    #wrapper{

ширина: 960px;Маржа: авто;}

    #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 <pre><code>// 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 {

border: none;} 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, но это не имело никакого эффекта.

1 Ответ

0 голосов
/ 12 сентября 2010

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

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

...