IE8的网站问题 [英] Website issues with IE8

问题描述

嗨.首先，我对HTML和CSS相当陌生.记住这一点.我不是专业人士.

这是我为当地艺术家创建的符合其规范的网站的链接:www.bransart.com

我已经使用以下工具测试了该网站:IE9，IE10，Mozilla Firefox，Google Chrome，一切看起来都还不错.

在IE8中会出现问题.描述艺术家的文字不应该流到小女孩的照片中.我该如何阻止这种情况的发生?正如我之前所说，在我测试过的浏览器中，除了IE8看起来还可以.

这是用于对包含描述性内容的

Hi. First off, I''m fairly new with HTML and CSS. Keep that in mind. I''m no professional.

Here is a link to the site I''ve created for a local artist to their specifications: www.bransart.com

I''ve tested the site using the following: IE9, IE10, Mozilla Firefox, Google Chrome, and everything looks okay.

In IE8 a problem occurs. The text describing the artist is *not* supposed to flow into the picture of the little girl. How do I stop that from happening? As I said before, it looks okay in the browsers I tested except IE8.

Here is a snippet of the CSS used to style the

进行样式设置的CSS的代码段.

containing the descriptive content.

#content-nav {
    height: 320px; /*IMPORTANT ----- needs to be defined or page jump occurs ----- */
        width: auto;
        margin: 0px 0px 20px 0px;
        padding: 0px;
        background: #FFFFFF url(background-girl.png) top right no-repeat;
        clear: both;
        overflow: hidden;

        /* rounded edges */
        border-radius: 5px 5px 5px;
        webkit-border-radius: 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px;

        /* drop shadow */
        box-shadow: 0 0 5px 5px #C2C2C2;
        -webkit-box-shadow: 0 0 5px 5px #C2C2C2;
        -mox-box-shadow: 0 0 5px 5px #C2C2C2;
}

section.content{
    heigth: auto;
    width: 65%;
    margin: 0px;
    padding: 20px 0px 0px 20px;
    line-height: 23px;
    text-align: justify;
    color: #515151;
    overflow: hidden;
}

section.content p.first:first-child:first-letter {
    font-size: 72px;
    padding: 10px;
    float: left;
    line-height: 35px;
}

section.content p.indent {
    text-indent: 20px;
}

如果需要更多说明，或者我将其张贴在错误的类别中，请告诉我！谢谢.

If more clarification is needed or I''ve posted in the wrong category please let me know! Thanks.

推荐答案

首先，让我告诉您一件事，Rounded Edges将无法通过IE8中的CSS工作.
可能由于这些代码而使您遇到问题:

Hi,
At first let me tell you one thing, Rounded Edges will not work through css in IE8.
May be your are getting problem because of these code:

/* rounded edges */
border-radius: 5px 5px 5px;
webkit-border-radius: 5px 5px 5px;
-moz-border-radius: 5px 5px 5px;

/* drop shadow */
box-shadow: 0 0 5px 5px #C2C2C2;
-webkit-box-shadow: 0 0 5px 5px #C2C2C2;
-mox-box-shadow: 0 0 5px 5px #C2C2C2;

您只需使用ajax的圆角扩展器即可解决.
祝一切顺利.
--AK

You just use rounded corner extender of ajax to make it solve.
All the best.
--AK

section.content p.first:first-child:first-letter {
    font-size: 72px;
    padding: 10px;
    float: left;
    line-height: 35px;
    width:400px;
}

根据您的要求设置宽度..

它将对您有帮助.

set width according to your requirement..

It will help you.

Note: dont forget to test in every browser while making your website compatible for all browsers.

谢谢
灰烬

Thanks
Ashish

这篇关于IE8的网站问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！