0

我正在尝试使用 jQuery 来调整 div 的大小以适应浏览器的视口，并且我能够在 Chrome、Firefox 和 IE 中使其大小合适。然而，由于某种原因，边框图像仅出现在 Chrome 中。

这就是我在 CSS 中的内容：

div.header, div.sidebar, div.content {
    border-width:          10px;
    -webkit-border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
       -moz-border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
            border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
}

这就是我在脚本方面的内容：（减去的数字用于格式化）

$("#over").css("height", document.documentElement.clientHeight+"px");
$("#over").css("width", document.documentElement.clientWidth+"px");

var overinner = $("div.overallinner");
$(".header").css("width", overinner.innerWidth()+"px");
$(".content").css("width", (overinner.innerWidth()-290)+"px");

var headr = $("div.header");
$("#head").css("width", headr.innerWidth()-5+"px");
$("#head").css("height", headr.innerHeight()-5+"px");

var sideb = $("div.sidebar");
$("#side").css("width", sideb.innerWidth()-5+"px");
$("#side").css("height", sideb.innerHeight()-5+"px");

var contn = $("div.content");
$("#cont").css("width", contn.innerWidth()-10+"px");
$("#cont").css("height", contn.innerHeight()-+"px");

有任何想法吗？

4

1 回答 1

0

jQuery 代码不是问题。这是 CSS 浏览器支持的问题。

火狐

在 Firefox 中，您必须指定 aborder-style和border-width, 才能使border-image样式生效。

div.header, div.sidebar, div.content {
    border-width:          10px;
    border-style:          solid;
    -webkit-border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
       -moz-border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
            border-image:  url(images/borderimage.gif) 10 10 10 10 stretch stretch;
}

IE

border-imageIE10 或更早版本不支持。在 IE 中模拟它需要一些额外的 jQuery 代码和/或修改静态 HTML。

选项

两种最干净的方法是：

  1. 如果IE10不需要边框图片，那么只为支持该border-image样式的浏览器提供（渐进式增强）。
  2. 如果在 IE10 中必须有边框图像，那么由于 IE10 需要不同的方法，您也可以对 Chrome 和 Firefox 使用相同的方法（并且根本不使用该border-image样式）。这样您就不必在同一个网站上维护两个不同的实现。
于 2013-04-24T23:28:22.830 回答