2012-05-08 3 views
1

배경에 이미지가있는 HTML 양식을 만드는 중입니다. 현재 특정 브라우저에서만 올바르게 표시되며, 다른 브라우저에서는 몇 픽셀 밖에 표시되지 않습니다.모든 브라우저의 배경 이미지가있는 HTML 양식

나는 다음 CSS가 내 문제를 해결할 것이라고 생각했지만 도움이되었지만 문제를 해결하지는 못했습니다.

input { 
width: 105px;  
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */  
-moz-box-sizing: border-box; /* Firefox, other Gecko */  
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

또한 폼 입력은 모두 여백으로 배치되고 배치됩니다.

답변

1

이미지가 고정 크기 인 경우, 당신은 position:relative;와 컨테이너의 배경으로 설정을 고려하고 위치 및 크기 조정을위한 top:, left:, right:bottom:position:absolute;을 사용할 수 있습니다.

+0

내가 스타일이 방법으로 변경하지만, 형태는 인터넷 익스플로러와 파이어 폭스, 그것에서 떨어져 여전히 Chrome에서 멋지다. –

+0

CSS 브라우저 선택 ".gecko # mc-embedded-subscribe"로 FireFox에서 올바르게 작동 함. –

1
.searchBox{ 
    background-image:url('images/magnifying-glass.gif'); 
    background-repeat:no-repeat; 
    padding-left:20px; 
} 

이제, 우리는 단순히 CSS 클래스 "정보 검색"우리의 입력 태그를 할당 :

<input type="text" name="search" class="searchBox"> 
+0

이것은 내가 찾고있는 것이 아니며 이미 배경에 이미지가 있습니다. 양식 요소는 단지 위치 지정 만합니다. 다른 브라우저에서 다르게. 그리고 양식 배경에 의해 나는 실제 입력 필드에있는 아이콘이 아닌 여러 입력 뒤에있는 배경 이미지를 의미했습니다. –

관련 문제