IE9는 특정 양식 제출 후 일부 CSS를 잃습니다.

Question

편집중인 사이트에 검색 양식이 있습니다. 기록을 위해, 위치에 몇몇 다른 모양, 접촉 및 등등이있다. 이것은 유일한 문제입니다.

양식을 제출하면 스타일 중 일부가 IE9에서 손실됩니다 (다른 버전의 IE 일 수도 있지만 아직 테스트하지 않았습니다). 주로 html 및 본문에 설정된 여백 및 색상이 손실 된 것처럼 보입니다. 메뉴, 배너, 텍스트 등은 모두 스타일을 유지하는 것으로 보입니다. 모든 스타일은 여기에 사용되는 한 장에 있습니다 ...

유용한 조언이 있으십니까?

여기는 검색 페이지의 내용과 양식을 확인하는 데 사용되는 PHP가 도움이되고 생각한 CSS가 손실되었다고 생각합니다.

편집 : 페이지는 거의 검색 페이지가 아닙니다. 검색은 동일한 페이지를 다시로드하고 검색 기능의 결과를 표시합니다. 따라서, 같은 임베디드 시트가 임베디드되어야합니다, 내가 볼 수있는 한 동일한 HTML이 표시됩니다 ... 이것이 토론에 도움이된다면. 아직도 어떤 유형의 오류를 찾기 위해 체로 치기.

<div id="search"> 
     <br /> 
      <div style="float:right;font-size:.8em;"> 
       <form name="form_sidesearch" action="search.html" method="post"> 
       <input type="hidden" name="action" value="search" /> 
       <input type="text" name="search_value" value="<?php echo $systems_primary->search_value ?>" /> 
       <input type="submit" name="submit_search" value="Search Website" /> 
       </form> <br /> 

      </div> 
    </div> 

<?php echo stripslashes($search_results); 

는 PHP :

<?php 

// -- Begin Search -------------------------------------------------------------------------------------- 
if($_REQUEST["action"] === "search") 
{ 
    if(strlen($_REQUEST["pg"]) <= 0) 
    { 

    $_REQUEST["pg"] = 1; 
    } 

    $search_results = $systems_primary->search_website("index",urldecode($_REQUEST["search_value"]),"<div class=\"listing ui-corner-all\"><a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" class=\"listing_title\">{ENTRY_TITLE}</a>{ENTRY_CONTENT} <a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" style=\"font-size:.8em;\">...read more</a></div><br /><br />",345,"all",10,$_REQUEST["pg"]); 
} 

// -- End Search ---------------------------------------------------------------------------------------- 
?> 

IE의 개발 도구는

html로 ... IE7-8에서 볼 때이 오류가뿐만 아니라 IE의 이전 버전에서 발생하는 것을 나타내는 것

잃어버린 CSS (더 많은 수) :

html { 
background-color:#F6E6C8; 
font-size:16px; 
font-family:Helvetica; 
} 
body { 
    width:1027px; 
    margin:0 auto; 
    background-color:#ffffff; 
    font-family: arial, 'times new roman', sans-serif; 
} 

정교화 : 어떻게 실제 것은입니다 페이지 공동 ntent는 왼쪽으로 이동하고 자동 여백을 사용하지 않고 왼쪽으로 정렬 된 상태로 유지됩니다. 또한 html 배경색이 손실됩니다. 검색 필드의 스타일 또한 손실되거나 무시됩니다. 그 밖의 무엇이 변경 될지 확실하지 않습니다.

Answer 1

일반적으로 양식을 제출 한 후 스타일을 잃어 버렸을 때, 특히 Ajax 작업이고 전체 페이지를 다시로드하지 않은 경우 스타일이 적용되지 않는 것은 JavaScript 또는 jQuery를 사용하여 적용된 일부 스타일이 페이지의 업데이트 된 부분 다시로드되었습니다. 여기에는 추가 요소가 만들어 지거나 하나 이상의 요소에 CSS 클래스가 추가 될 수 있습니다.

HTML 양식 요소의 스타일링에서 특히 그렇습니다. 일부 양식 요소의 무거운 스타일링은 JavaScript 또는 jQuery를 사용하여 수행 할 수 있기 때문에 특히 그렇습니다.

그런 경우 페이지가 처음로드되었을 때 관련 콘텐츠의 스타일을 지정한 JavaScript 또는 jQuery를 식별 한 다음 페이지가 업데이트 된 후 (Ajax 호출이 성공적으로 완료되거나 브라우저가 페이지를로드하거나 새 페이지를로드).

오류가 발생하면 이전과 이후 페이지의 HTML을 비교하여 변경된 사항을 확인하십시오. body 태그에 CSS 클래스가 있거나 일관되게 설정되지 않는 컨테이너 클래스가있을 수 있습니다. 새 페이지가로드되면 다른 CSS 파일 집합이 다운로드되거나 한 페이지에는 있지만 다른 페이지에는 포함되지 않은 포함 된 스타일 시트가있을 수 있습니다.

오류가 발생하면 HTML과 CSS가 유효한지 확인하십시오. 일부 브라우저는 잘못된 코드를 렌더링 할 때 다른 브라우저보다 용서가 좋습니다. 브라우저 버그와 같이 보이는 것은 잘못된 코드로 인해 발생할 수 있습니다.

아무 것도 나타나지 않고 문제가 불분명 한 브라우저 버그로 인해 발생할 가능성이 높은 경우 문제를 일관되게 재현 할 수있는 가장 단순한 상태로 코드를 줄이고 더 많은 코드를 식별하려고 시도하십시오 버그의 본질이 무엇인지 분명하게 알 수 있습니다. 그러면 수정 사항을 쉽게 찾고 도움을 요청할 수 있습니다. 코드를 줄이는 과정에서 갑자기 문제가 사라지면 마지막으로 제거 된 코드가 문제의 원인이 될 수 있습니다.

반대로, 운율이나 문제의 원인이 없다면 문제가 여전히 발생하는지 확인하기 위해 코드를 처음부터 다시 구현하는 것이 도움이되는 경우가 있습니다. 코드를 작성하는 동안 문제가 발생하기 시작하면 마찬가지로 마지막으로 추가 된 코드가 문제의 원인이 될 수 있습니다.

Answer 2

당신은

$('#yourForm").on('submit',function(e){ 
$(this).css({ 
// reasign all the atributes you lost 
}); 
e.preventDefault(); 
});