너무 오른쪽으로 떠 다니고 있습니다

StackOverflow https://stackoverflow.com/questions/428862

문제

한 화면에 마스터 레코드를 표시하고 Ajaxes는 편집자 DIV에 동적으로 구축 된 편집기를 표시하는 레코드 관리 웹 응용 프로그램을 가지고 있습니다. 작동합니다.

DIV가 창이 아니지만, 나는 그것을 조금 더 비슷하게 행동하게 만드는 것이 좋은 생각이라고 생각했기 때문에 "닫기"버튼으로 코딩했습니다. 구조는 다음과 같습니다.

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

편집체는 사람들이 입장하려는 것에 따라 가변적 인 차원입니다.

Draghandle의 너비는 편집기의 100%로 설정됩니다. CloseButton은 CSS AS로 설정됩니다 float:right.

내 문제는 IE6과 IE7에서 닫기 버튼이 너무 오른쪽으로 떠 다니는 것입니다. 편집기 div를 어디로 끌어 올리 든 항상 창의 오른쪽 가장자리에 대항합니다. Firefox와 Safari에서는 내가 기대했던 것처럼 보입니다. 창은 편집기만큼 넓고 CloseButton은 오른쪽 상단에 앉습니다.

나는 플로트에 특히 첨부되지 않습니다 : 맞습니다. 단지 모든 브라우저에서 동일한 결과를 얻을 수있는 CSS를 설정하는 방법을 찾고 있습니다. 어떤 아이디어?

"스크린 샷"

JSBIN에서 내가하고 싶은 일에 대한 모형입니다 (감사합니다, Redsquare)

샘플 코드

법적으로 민감한 정보로 작업하여 앱의 스크린 샷을 제공 할 수 없습니다. 그러나 일부 샷을 가져 와서 텍스트와 인터페이스를 차단하여 창 구조 만 남겨 둡니다.

IE7에서 어떻게 보이는지

Firefox에서 어떻게 보이는지 3

도움이 되었습니까?

해결책

a를 사용하는 것만 고려할 수 있습니다 jQuery 대화 상자 대신 미리 메이드와 스타일은 이미 크로스 플랫폼에서 작동합니다.

다른 팁

기록을 위해, 이것을 고치기 위해 노력한 것은 CloseButton의 CSS를 바꾸는 것이 었습니다.

float: right;

에게

position: absolute;
right: 5px;
text-align: right;

이것은 IE에서 적절한 결과를 생성하며 내부 형태 필드에 대한 약간의 패딩으로 겹치는 것에 대해 걱정할 필요가 없습니다.

CSS 해킹은 때때로 필요합니다.

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here

IE 특정 CSS 해킹의 경우 다음과 같은 작업을 수행 할 수 있습니다.

#divId {    
   margin-right: 0; /*Normal styles for all browsers*/    
  *margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/        
  _margin-right: 90px; /*The underscore allows only IE6 to read this style*/    
}

일반 (유효한) CSS 스타일에 별표와 밑줄이 배치되는지 확인하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top