IE 修复 - 条件注释脚本不会执行

发布于 2024-12-05 18:21:14 字数 435 浏览 1 评论 0原文

我正在尝试建立一个网站。我让它在除 IE 8 及更低版本之外的所有浏览器中正确显示。 IE 在我的 img 周围呈现蓝色框，这些框也是锚点。我可以通过将 border 属性设置为 none 来摆脱这个问题，但我想用 javascript 来做到这一点。我可以让我的 Javascript 在条件注释中执行。

try
{
var ancs = document.getElementsByTagName("a");

    for(var i=0; i<ancs.length; i++)
    {
        if(ancs[i].childNodes[0].nodeName == "IMG")
        {
            //Set border property to none
        }
    }
}
catch(err)
{
alert(err);
}

原文

I'm trying to build a website. I have it displaying correctly in every browser except IE versions 8 and lower. IE renders blue boxes around my img's that are also anchors. I can get rid of this by setting the border property to none but i'd like to do it with javascript. I can get my Javascript to execute in a conditional comment.

try
{
var ancs = document.getElementsByTagName("a");

    for(var i=0; i<ancs.length; i++)
    {
        if(ancs[i].childNodes[0].nodeName == "IMG")
        {
            //Set border property to none
        }
    }
}
catch(err)
{
alert(err);
}

分享到QQ

分享到微博

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

发布评论

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

岁月静好 2024-12-12 18:21:14

很抱歉没有回答 javascript 部分。但是你应该使用CSS来做到这一点，如下所示：

a img { border:0; }

I am sorry for not answering to the javascript part. But you should do it with CSS like this:

a img { border:0; }

回复收藏 0 原文

猫瑾少女 2024-12-12 18:21:14

你的条件评论是什么样的？而且，为什么不将其应用为一种样式呢？它会比使用 JavaScript 更快并且得到更好的支持。

回复收藏 0 原文

败给现实 2024-12-12 18:21:14

IE 对于本身未指定边框样式的图像有一种默认边框样式。这是 IE 众所周知的痛点。解决此问题的正确方法是向页面添加默认 CSS 规则。如果这是第一个 CSS 规则，那么它不会影响您已经设置的任何其他 CSS 规则：

<style type="text/css">
    img {border: none;}
</style>

或者如果您确实只想影响中的图像标记，您可以使用此 CSS：

<style type="text/css">
    a img {border: none;}
</style>

如果您只想修复/更改一张图像，您还可以通过指定内联边框来在标记中处理该特定图像：

<img border="0" src="xxxx">

如果您确实想要要使用 javascript 执行此操作，您可以放置此代码可以在页面加载后调用，也可以仅在页面加载后调用：

function nukeImageBorders() {
    // assumes all affected images have an <a> tag as their parent
    var list = document.getElementsByTagName("img");
    for (var i = 0, len = list.length; i < len; i++) {
        if (list[i].parentNode.tagName.toLowerCase() == "a") {
            list[i].style.border = "none";
        }
    }
}

您可以在此处查看代码在 IE 中的工作情况： http://jsfiddle.net/jfriend00/cnEhY/

IE has a default border style for images that don't specify one themselves. This is a known pain of IE. The proper way to fix this is to add a default CSS rule to your page. If this is one of the first CSS rules, then it won't affect any other CSS rules you've already set:

<style type="text/css">
    img {border: none;}
</style>

or if you really only want to affect images that are in an <a> tag, you would use this CSS:

<style type="text/css">
    a img {border: none;}
</style>

If you only want to fix/change one image, you can also address that particular image in the <img> tag by specifying an inline border:

<img border="0" src="xxxx">

If you really want to do it with javascript, you can place this code either after your page has loaded or call it only once the page is loaded:

function nukeImageBorders() {
    // assumes all affected images have an <a> tag as their parent
    var list = document.getElementsByTagName("img");
    for (var i = 0, len = list.length; i < len; i++) {
        if (list[i].parentNode.tagName.toLowerCase() == "a") {
            list[i].style.border = "none";
        }
    }
}

You can see the code work in IE here: http://jsfiddle.net/jfriend00/cnEhY/

回复收藏 0 原文

~没有更多了~