Incompatibilidade com CSS "IE-Google Chrome"

[maquinaw 0]

Olá, gostaria de uma ajuda para solucionar o meu problema. Coloquei uma imagem abaixo do título da postagem do meu blog, essa imagem ela aparece no Google Chrome e no Firefox, mas no Internet Explorer ela aparece com falha, uma imagem verde...

 

http://novotesteid.blogspot.com.br/2013/12/feliz-natal.html

 

.post h1.post-title{margin: 5px 0px 40px;
border-bottom: 16px solid #006400;
padding: 0 0 0;
font-size: 200%;
margin-right: 15px;
border-image-slice: 0 0 85 5;
border-image-width: 20px 0px 60px 20px;
border-image-outset: 0px 15px 45px 0px;
border-image-repeat: stretch stretch;
border-image-source: url('https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.png');}

Quero que a imagem apareça normal em qualquer navegador. Abaixo as imagem (Anexo1-Google Chrome e Anexo2-IE)

 

[Diéssica 140]

Qual é a versão do IE?

 

Você pode fazer isso de forma bem mais simples e intuitiva utilizando a propriedade background. border-image é uma propriedade do CSS3 suportada apenas por versões do Internet Explorer superiores a 10.

 

:seta: http://caniuse.com/border-image

[maquinaw 0]

Testei na versão do IE7 e IE10. Como ficaria o código nesta tua versão simples?

 

 

Coloquei assim o código, mas a imagem repete logo acima do texto e não consigo deixar a imagem somente abaixo do texto.

 

 

.post h1.post-title{margin:5px 0 15px;padding:0 0 71px;font-size:200%;background-position: 0px 100px;background-image: url(https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.png)}

[Diéssica 140]

Bem, seu código está um pouco confuso.

 

Mas enfim, para consertar:

1. Remova o background-position.

2. Substitua seu código pelo código abaixo.

.post h1.post-title {
margin: 5px 0 15px;
padding: 0 0 71px;
font-size: 200%;
background-position-y: 30px;
background-image: url(https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.pngg'>https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.pngg)
background-repeat: no-repeat;
}

Pode-se simplificar a propriedade background-*:

background: url(https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.png) no-repeat 0 30px;

E, portanto:

 

.post h1.post-title {
margin: 5px 0 15px;
padding: 0 0 71px;
font-size: 200%;
background: url(https://lh3.googleusercontent.com/-Pj_khbGDzgM/UqNFxCfL35I/AAAAAAAAMDQ/4ZzVwhUe9Vk/s694/lll.png) no-repeat 0 30px;
}

 

 

Obs.: se a margem à esquerda for indesejada, sugiro que coloque o background no elemento [inline]article[/inline], de classe "post hentry".

[maquinaw 0]

Muito obrigado, apanhei pra conseguir o resultado, mas com a tua ajuda deu tudo certo. Obrigado!