jQuery로 테두리 이미지의 크기를 변경합니까?

Question

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"); 

어떤 아이디어?

Answer 1

jQuery 코드는 문제가되지 않습니다. 이것은 CSS 브라우저 지원의 문제입니다. 파이어 폭스에서

파이어 폭스

, 당신은 border-image 스타일이 작동하도록하는 border-width뿐만 아니라 border-style를 지정해야합니다.

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-image은 IE10 or earlier 지원하지 않습니다. IE에서 시뮬레이션을하려면 몇 가지 추가 jQuery 코드가 필요하고 정적 HTML을 수정해야한다.

옵션

두 깨끗한 방법은 다음과 같습니다가 IE10에서 국경 이미지를 가지고하는 것이 필수적이 아니라면

1. 이 만 지원 브라우저를 제공하는 border-image 스타일 (점진적 개선) .
2. 테두리 이미지가 IE10에 필수적이라면 IE10에는 다른 접근 방식이 필요하므로 Chrome과 Firefox에서도 동일한 접근 방식을 사용할 수 있습니다 (border-image 스타일을 전혀 사용하지 않을 수도 있음).). 이렇게하면 동일한 웹 사이트에서이 두 가지 구현을 유지 관리 할 필요가 없습니다.