배경 - 이미지 : 홈페이지() 입력

IE 8에서 작동하지 않는 나는 그것의 형태와 HTML 페이지가 있습니다. 단추에 이미지를 추가하려고합니다. 지금까지 버튼의 이미지가 작동 중이거나 파이어 폭스와 크롬으로 표시 중입니다. 하지만 IE8에서 그냥 정상적인 입력 버튼을 표시. 투명성 및 기타 속성조차도 작동하지 않습니다. 누구든지 어떤 해결책을 제안하거나, 내가 틀린 원인이라면 나는이 모든 웹 것의 멍청 아. 고맙습니다!배경 - 이미지 : 홈페이지() 입력

base.html :

있는 style.css

{% load static %} 
<html> 

    <head> 
     <title>test</title> 
     <link rel="stylesheet" type="text/css" href="{% static "assets/css/style.css" %}"> 
    </head> 

    <body> 
    <header> 
     <div id="main"> 
      <div id="content"> 
       <a href="http://www.google.com"><img src="{% static "assets/images/google.png" %}" width="202.5" class="logo"/></a> 
      </div> 
      <div id="form"> 
       <form action="/auth/" method="post">{% csrf_token %} 
        <label for="email" class="label">Email</label> 
        <input type="text" name="email" value="" id="email"> 

        <label for="password" class="label">Password</label> 
        <input type="password" name="password" value="" id="password"> 

        <input type="submit" value=" "/> 
       </form> 
      </div> 
     </div> 
    </header> 

    <footer> 
     <div id="footer"> 
      <div id="image"> 
       <div> 
        <a href="/assets/image/test.png"></a> 
       </div 
      </div> 
     </div> 
    </footer>

* { 
    margin:0; 
    padding:0; 
} 


body{ 
    background:#3effbd; 
} 

#main { 
    background-color:#3B5998; 
    width:1000%; 
    height:90px; 
} 

.logo { 
    border:none; 
    top:24px; 
    left:247px; 
    position:relative; 
    padding:0px; 
    margin:0px; 
} 

.login li{ 
position:relative; 
top: -10px; 
left: 900px; 
display:inline; 
} 

input[type=submit]{ 
    border:none; 
    background-color: transparent; 
    overflow: hidden; 
    cursor: pointer; 
    width: 57px; 
    height: 26px; 
    background-image: url(../images/button.png); 
} 

.label { 
    font-size: 15px; 
    color: white; 
    position: relative; 
    margin: 10px; 
}

출처

2013-08-21 Robin

[Internet Explorer 8의 배경 이미지가있는 제출 단추] 가능한 복제본 (http://stackoverflow.com/questions/9332783/submit-button-with-background-image-in-internet-explorer-8) – putvande

Is #main에서 @ 1000 %의 오타가있는 너비? –

@putvande 이것은 전혀 다른 문제입니다. 이는 입력에 아이콘을 추가하는 것이 아니라 실제 제출 입력의 스타일을 지정하기위한 것입니다. 어떤 이유로 IE8이이 두 가지 문제에 응답하는 방식이 다르므로 이것이 다른 질문이라고 말하고 싶습니다. –

내가 내 로컬 드라이브의 전체 코드를 복제하지만 IE8에서 잘 작동했다! 그러나 대신에 이것을 시도 제출 입력 타입을 사용

는 :

<button type="submit"></button>

출처

2013-08-21 19:59:01

당신은 버튼의 값이없는 - 그것은 아무것도 표시되지 않습니다. 값에  을 추가하거나 좋은 '안녕, 들여 쓰기를 사용 -999999를 값으로.

또한 내가 매우 비슷한 상황이 있었다이 CSS

display:inline-block;

출처

2013-08-21 19:59:13 peterchon

을 추가하고 지금은 완벽하게 작동하는 결의안을 발견했다. 작동 100 %로, 윈 XP & IE8을 실행하는 가상 머신에서 테스트되었습니다.

여기 내가 뭘 발견이다.

개발자 도구에서 IE8 입력에 [타입 = 제출] 제출 버튼이 있지만, 관련 CSS 규칙 중 어느 것도 실제로에서 발로 없었다과 관련되고 있던 내가 변경이 증명하려면 그들은 dev 도구에서 심지어 그들을 제거했습니다. 단추는 동일하게 유지되었습니다.

그래서 규칙이 첨부되어 있지만 속성이 구현되지 않은 것처럼 보입니다.

<input type="submit" value=" " class="btn"/>

는 다음 CSS에 클래스를 추가 :

input[type=submit], .btn{ 
border:none; 
background-color: transparent; 
overflow: hidden; 
cursor: pointer; 
width: 57px; 
height: 26px; 
background-image: url(../images/button.png); 
}

당신은해야 이것에 대한 간단한 수정과 같이 CSS에 버튼 규칙이 클래스를 추가 한 후 버튼 클래스를 제공하는 것입니다 이제 규칙 속성이 적용되는 것을 볼 수 있습니다.

당신이 변경 시도해야하지 않으면 :

background-image: url(../images/button.png);

background: url(../images/button.png);

에 배경으로 그들이 CSS 파일에 사용되는 처음 참조 할 필요가 이미지의보고가있다.

출처

2014-04-08 09:29:16

배경 - 이미지 : 홈페이지() 입력

답변

관련 문제