IE8问题与容器？

时间：2013-11-19 11:02:47

标签： html css internet-explorer-8

有一个问题，其中Internet Explorer导致我的网站的容器看起来伸展开来：

enter image description here

该网站的网址为http://profiledt.co.uk/SetTraining/

据我所知，现在许多网站都不支持IE8，但我觉得修复网站容器会降低反弹评级。

由于

2 个答案:

答案 0 :(得分：3)

发生这种情况的原因很可能是IE陷入怪癖模式。 IE8下降到IE5怪癖模式，这显然不是一件好事。

原因是你的HTML完全无效。

您的文档以这两行开头：

<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>

其次是<!DOCTYPE html>。将这些行放在适当的位置，并使用某些工具验证您的HTML，例如this one。 （official validator由于某种原因而失效，可能有太多人使用它了）

答案 1 :(得分：1)

尝试将-ms-filter属性添加到幻灯片中。

示例：

<li id="ts-twentytwelve-slide-5272327b9a2a3823180679" class="ts-twentytwelve-slide  cycle-slide" style="background-image: url(http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg); position: absolute; top: 0px; left: 0px; z-index: 97; display: none; opacity: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg', sizingMethod='scale');-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg', sizingMethod='scale')">
    <a href="" class="ts-twentytwelve-link " style="left: 540px; top: 191px">
        <div class="ts-twentytwelve-overlay">
            <h1 class="ts-twentytwelve-title">Slider too big?</h1>
            <p class="ts-twentytwelve-description">Slider too big?</p>
        </div>
    </a>
</li>

分别替换每张图片的src。 它强制将背景图像缩放到其容器尺寸。

修改

根据你的评论，你可以尝试这个（我没有测试过）：

<script type="text/javascript">
$(document).ready(function(){
    $('.ts-twentytwelve li').each(function(){
        var bg = $(this).css('background-image');
        bg = bg.replace('url("','').replace('")','');

        $(this).css({
            "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale')",
            "-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale')"
        });             
    });
});
</script>

循环遍历每张幻灯片，并添加具有特定背景图像的过滤器。 并且当影子向导提到为您的文档添加有效的doctype（下载header.php并检查顶部是否如下所示：

<?php
/**
 * some comments here...
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
相关问题
最新问题