当前位置： 文江博客话题详情

IE8 中的 DIV 显示更宽适用于 FireFox、Safari、IE8 兼容。模式

发布于 2024-09-18 17:31:10 字数 5639 浏览 19 评论 0原文

我最近尝试在网站内添加一行“社交媒体图标”。创建 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{

：950px； 浮动：左； 内边距：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() {

修复IEPNG($$('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 {

边框：无； } 模板网址(); ？

/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 文件中的第一项，但没有效果。

原文

I recently have attempted to add a line of "Social Media Icons" inside of a website. After creating a DIV and applying the properties everything looks fine in FireFox, Safari, and Internet Explorer 8 Compatability mode.

However, viewing the page in IE8 makes the DIV look like one pixel wider on the right-hand side. Also increasing the magnification in IE8 to 105% corrects the problem, yet this is hardly a satisfactory fix by my estimation.

Website URL: http://MikeChurch.com

Cascading Style Sheet (CSS)

    #wrapper{

width:960px;
margin:auto;
}

    #banner{

width:100%;
float:left;
}

    #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{

width:100%;
float:left;
background:#fff;
}

   #innerpad{

width:950px;
float:left;
padding: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 {

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&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>

*Note: I have tried placing the DOCTYPE as the very first item in the HTML file, but it had no effect.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

暖阳 2024-09-25 17:31:10

发生的情况是你说的 width='99%' 我相信这会受到一些舍入的影响，并且 IE8 会产生 1 个额外的像素。您对下面的 div 使用了不同的技术，以获得白边距 - 填充。在社交媒体 div 上，您使用了宽度为 5px 的白色边框。 IE 将边框宽度计入整个容器宽度，因此如果您说 width=100%，那么它会宽 10 个像素，所以我猜您选择了 99% 来使其最接近正确的宽度。

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

What happens there is that you said width='99%' which is subject to some rounding I believe and IE8 comes up with 1 extra pixel. You used a different technique for the div below, in order to obtain the white margin - a padding. On the social media div you used white borders with a width of 5px. IE counts the border width into the overall container width so if you'd say width=100% it would have been 10 pixels wider so I guess you chose 99% to make it closest to a right width.

I suggest you either use the same technique as in the "innerpad" div (paddings) or use an absolute width of 950px rather than a relative one.

回复 原文
~没有更多了~

关于作者

浊酒尽余欢

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文