【发布时间】：2010-09-12 07:47:06
【问题描述】：
我最近尝试在网站内添加一行“社交媒体图标”。创建 DIV 并应用属性后，在 FireFox、Safari 和 Internet Explorer 8 兼容模式下一切正常。
但是，在 IE8 中查看页面会使 DIV 在右侧看起来像宽一个像素。将 IE8 中的放大倍数提高到 105% 也可以解决问题，但据我估计，这并不是一个令人满意的解决方案。
网站网址： 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{
宽度：950px； 向左飘浮; 填充：0px 5px 5px 5px;
HTML
fixIEPNG($$('img'));
fixIEPNG ($$('#banner-top'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner-bottom'), '', 'scale', 0, 2); border: none;
}
templateurl(); ? /css/template_ie6.css" type="text/css" />
// 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() {
}
</script>
<style type="text/css">
.clearfix {height: 1%;}
img {
<![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&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 文件中的第一项，但没有效果。
【问题讨论】：
标签： html internet-explorer-8 width alignment