인쇄/미리보기 내 Print.css 무시하기

나는 두통을 일으키는 문제가있다. 나는 보고서를 인쇄하고 print.css를 사용하여 올바르게 형식을 지정하려고하지만 매번 내 CSS를 완전히 무시합니다. 누구든지 전에이 문제가 있었습니까? CSS 파일이 올바른 디렉토리에 있는지 확인했지만 여전히 운이 없다.인쇄/미리보기 내 Print.css 무시하기

참고 :

여기 내 템플릿입니다 내가 인쇄 버튼을 제어하기 위해 자바 스크립트를 사용하고 난 CSS 링크를 포함 한 경우 자바 스크립트 안에 있습니다. 또한 HTML 페이지에 그냥 넣으려고했지만 그게 도움이되지 못했습니다.

... 
<script type="text/javascript"> 

function printContent(id){ 

    str=document.getElementById(id).innerHTML 
    newwin=window.open('','printwin','left=100,top=100,'+ 
         'width=900,height=400, scrollbars=1') 
    newwin.document.write('<HTML>\n<HEAD>\n') 
    newwin.document.write('<TITLE>Print Page</TITLE>\n') 
    newwin.document.write('<link rel="stylesheet" type="text/css" '+ 
         'href="/media/css/print.css" media="print"/>\n') 
    newwin.document.write('<script>\n') 
    ...

이제 전혀 도움이된다면 나는 우분투 10.10, 파이어 폭스 7을 사용하고이 프로젝트.

편집 나는 파이어 폭스의 웹 개발자 툴바를 설치했습니다. 그것은 당신이 다른 medias로 페이지를 볼 수 있습니다. 이제 인쇄를 클릭하면 모든 스타일 변경 사항이 표시되지만 인쇄 할 때는 변경되지 않습니다.

출처

2011-09-30 TheLifeOfSteve

CSS에 어떤 내용이 있습니까? 즉, 스타일이 무시되고 있다고 생각하게 만드는 것은 정확히 무엇입니까? 인쇄 스타일 시트에 대한 브라우저 지원이 정말 끔찍하기 때문에 나는 묻습니다. 단순히 작동하지 않는 것들이 많이 있습니다. – Pointy

'media = "print"'을 생략 해 보셨습니까? 창은 인쇄용으로 특별히 제작 되었기 때문에 스프레드 시트를 특정 용지 유형에 부착 할 필요가 없습니다. –

@Pointy 스타일 시트는 헤더, hr 스타일 요소 등에 대해 다른 글꼴 크기를 가지고 있습니다. 위의 내용을 확인하십시오. ** 편집 ** – TheLifeOfSteve

<html> 
    <head> 
     <title>your website title</title> 
     <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css"> 
     <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css"> 
    </head> 
    <body> 
     <input type="button" value="Print" onClick="javascript:window.print();" /> 
    </body> 
</html>

어쩌면 당신은 위의 HTML 서식 파일에 바둑을 제공하고 싶거나 그 것이 당신에게 적합한 지 또는 필요한지 확인하십시오.

내 의견으로는, 제안 된 기능은 실제로 HTML 페이지를 동적으로 생성하려고 시도 할 때 클라이언트 측이 아닌 서버 측에서 작성하는 것이 더 좋습니다. 해당 페이지를 print.html 또는 다른 것으로 출력 할 수 있으며 일단 클라이언트로 전송되면 print.css 스타일을 적용하고 인쇄를 수행합니다. 어쨌든 여기 몇 가지 아이디어 만 있으면 잘하면 귀하의 경우 조금 도움이됩니다. 건배.

출처

2011-10-01 03:44:41 woodykiddy

이 방법이 도움이되는지 잘 모르겠지만 @media print {}는 인쇄 작업 중에 모든 스타일을 캡슐화해야합니다.

<style type="text/css"> 
    @media print{ 
     /* Make the HR tag have 50 px spacing above and below */ 
     hr{ padding: 50px 0px; } 
    } 
</style>

이 유형의 스타일링을 처리하기 위해 지원됩니다. 이 스크립트는 여전히 css 파일을 포함 할 책임이 있지만 @media print {}는 인쇄 작업에만 적용되는 모든 스타일을 알려줍니다.

출처

2011-10-01 03:50:18 Furbeenator

이 아님을 의미합니다. – Christoffer

예, 감사합니다. Christoffer! – Furbeenator

인쇄/미리보기 내 Print.css 무시하기

답변

관련 문제