DIV显示IE8中的Wider可以在FireFox，Safari，IE8中运行。模式

时间：2010-09-11 23:34:38

标签： html internet-explorer-8 width alignment

我最近试图在网站内添加一行“社交媒体图标”。创建DIV并应用属性后，在FireFox，Safari和Internet Explorer 8兼容模式下，一切都很好。

但是，在IE8中查看页面会使DIV在右侧看起来像一个像素更宽。将IE8的放大倍率增加到105％可以解决问题，但根据我的估计，这不是一个令人满意的解决方案。

网站网址 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() {
// 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 :(得分：0)

你所说的宽度='99％'会发生什么变化，我相信这会有一些四舍五入，IE8会增加1个像素。您为下面的div使用了不同的技术，以获得白色边距 - 填充。在社交媒体div上，您使用宽度为5px的白色边框。 IE将边框宽度计算为整个容器宽度，所以如果你说宽度= 100％它会宽10像素，所以我猜你选择了99％使它最接近正确的宽度。

我建议您使用与“innerpad”div（paddings）相同的技术，或使用950px的绝对宽度而不是相对宽度。

相关问题
最新问题