2010-08-22 2 views
0

방금 ​​웹 사이트를 완성했으며 FF, Safari 및 Chrome에서 잘 보입니다. Opera는 좋아 보이지만 FF만큼 좋지는 않습니다. IE가 매우 나쁩니다.Opera와 IE에서 CSS가 좋지 않습니다. 어디에서 시작해야합니까?

불량 CSS를 검사하고 수정하는 응용 프로그램이 있습니까? 그렇지 않은 경우 웹 사이트를 크로스 브라우저로 조정하는 가장 쉬운 방법은 무엇입니까?

다음은

내가 여러 입력이 포함 된 index.html에서 양식을 가지고 ... 단지 내가 외관 가지고있는 많은 문제 중 하나입니다. 입력의 오른쪽에는 양식을 제출하는 "검색"버튼이 있습니다. 이 버튼은 오른쪽에 있어야하지만 때로는 한 줄을 떨어 뜨려 입력 아래의 왼쪽에 끝납니다. 이것은 Opera 10.53 및 IE 브라우저에서만 발생합니다. (다른 Opera 버전은 테스트하지 않았습니다). 그것을 물론

.nav_container2 { 
    position:relative; 
    left:0px; 
    top:10px; 
} 

.nav_container { 
    background-image: url(../Graphics/menu_lvl1.gif); 
    height: 101px; 
    width: 720px; 
    padding:0; 
    margin:0; 
} 

더 입력 그냥 알려해야하는 경우 ...

: 여기

코드입니다 :

<table border="0" align="center"> 
    <tr> 
    <td> 
     <div class="nav_container" id="nav_container"> 
     <div id="nav_container2" class="nav_container2"> 
      <form id="nav_form_main" name="nav_form_main" action="/search/" target="iframe001" method="get" onSubmit="reset_and_subm();"> 
      <div class="nav_lists" id="nav_list"> 
       <input name="nav_querystring" type="text" id="nav_querystring" style="width: 240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;" value=""> 
       <select name="nav_category_list" size="1" id="nav_category_list" style="width: 195px;" onChange="subcatSelection();"> 
       <option value="All categories" selected>-- All categories --</option> 
       ALOT OF OPTIONS HERE 
       </select> 
       <select name="nav_city_list" id="nav_city_list" style="width: 180px;" onChange="areapicker();"> 
       <option id="Hela Sverige" value="Hela Sverige" selected>-- Hela Sverige --</option> 
       ALOT OF OPTIONS HERE 
       </select>     
       <input type="submit" name="nav_submit" id="nav_submit" value="Sök" style="width: 58px; font-size: 13px;"> 
      </div> 
      </div> 
     </td> 
     </tr> 
    </table> 

그리고 여기에 포함 된 CSS는 여기에 가장 많은 이슈가있는 IE입니다 ... Opera에서 위에서 언급 한 일부 ... 나머지는 괜찮습니다. 내가 CSS를 디버깅 알고 좋은 응용 프로그램이 정말 없다

감사

+0

참고 : 또한 레이아웃이 테이블에 있어서는 안된다는 것을 알고 있습니다.하지만이 경우는 ... 감사합니다. –

+1

'nav_container2'? 나는 Divitis의 징후를 냄새 맡는다. http://csscreator.com/divitis – Dykam

+0

@ Anonymous12345 https://stackoverflow.com/questions/29277798/my-css-looks-messed-up-in-ie/29278562#29278562 –

답변

1

귀하는이 W3C 표준에 부합하는지 확인하기 위해 CSS를 확인하려면 다음 사이트를 사용할 수 있습니다

http://jigsaw.w3.org/css-validator/

그것은 당신의 CSS 불구하고 이동 호환성을 확인합니다, 그리고 경우에 오류를 다시 침 그들은 존재합니다. 파일에서 실수가있는 위치를 표시하여 문제를 해결할 수 있습니다. 나는 당신을 위해 CSS를 고칠 도구에 대해서는 모른다. 그런 식으로 배울 것이 없기 때문에 나는 그것을 사용하지 않을 것이다.

http://validator.w3.org/

이 개발 때 자주 사용하는 두 놀라운 도구는 다음과 같습니다

당신은 당신이 사용하여 HTML 및 기타 마크 업 언어를 확인하려면 다음 사이트를 사용할 수 있습니다. 또한 개발할 때 훨씬 더 편하게 생활하기 위해 Web Developer ToolbarFirebug을 설치하는 것이 좋습니다.

이러한 도구를 사용하면 브라우저 간 호환 웹 사이트를 만드는 데 도움이됩니다. 호환되지 않는 것이 있으면 디버깅 및 수정을 위해이 도구를 사용할 수 있습니다.

도움이 되었기를 바랍니다.

1

. 그래도 정확한 주문을 가지고 있습니다. 파이어 폭스, 크롬/사파리, 오페라, IE로 시작하십시오. Internet Explorer를 오페라 위에 놓고 사용법에 따라 중요도를 정합니다.

해당 브라우저가 제대로 작동 할 수 있어야합니다. IE의 경우 conditional comments으로 이동하여 에만으로 추가 CSS를 적용하십시오. 당신은 다른 스타일을 오버라이드하여 IE에서보기에 좋지 않은 것들을 바로 잡을 수 있습니다.

0

아직 사용하고 있지 않다면 CSS 재설정을 사용하는 것이 좋습니다. 그러면 대부분의 크로스 브라우저가 제거됩니다. 조건부 주석을 사용하여 특정 CSS 파일로 쉽게 수정할 수있는보다 명확한 브라우저 관련 버그를 남깁니다.

파이어 폭스, 크롬, 즉 8, 즉 7, 즉 6, 오페라, 사파리를 테스트합니다. 브라우저가없는 브라우저의 스크린 샷을 표시하는 앱이 있습니다. 그러나 나는 그것이 실제로 도움이되지 않는다는 것을 안다. 예를 들면, 7 & 8, 크롬과 FF가 행복하다.

어쩌면 직접 질문을하지 않을 수도 있지만 너무 많은 불일치를 피할 수 있습니다. :)

+0

오, 그리고 BTW, 나를 원한다면 코드를 디버깅하려면 코드가 더 필요합니다. 또한 입력 및 물건의 CSS – no1cobla

관련 문제