어떤 블로그에서 읽었거든요 ... 그것이 미래의 심판을 위해이 카탈로그에 좋은 줄 알았는데 .... 또한 당신이 언젠가 물었 것이 중요한 면접 질문이 될 수도 ....
IE7에서 IE6과 검정색에 녹색, 최신 브라우저에서 빨간색 구형 브라우저에서 파란색으로 단락을 표시합니다 CSS의 미리보기 쓰기
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
다시 자전거는 버즈 워드이며, 웹 개발에서는 전혀 다른 의미가 없어. 그것은 노력의 측면에서, 에너지 절약!
CSS를 작성하고 설계에서 HTML을 만드는 몇 년 동안, 나는 '다시 발명 휠 "등 우리가 일반적으로 용어 것에 시간과 에너지 절약을 추구에서, 몇 가지 모범 사례를 따라했습니다. 다시 시간과 시간, 나는 내 장래 일을 끄집어 내보는 사용할 수있는 몇 가지 표준 재사용 가능한 CSS, 나는 몇 가지 템플릿을 작성해야하는 자신의 능력을 말한거에요. 완전히는 아니지만하지만 난 목표들을 달성하기 위해 관리 않았다.
발전에 CSS의 재사용, 나는 내 자신보다도 우리에게 일반적으로 사용할 수 있으며 이들은 시도 및 테스트와 많은 경험을 가진 개발자가 만든대로, 그들이 사용 넣어하기로 결정 몇 CSS 프레임 워크에서 모습을했다. 더 중요한 '다시 발명을 피하십시오. "
참전 용사에 대한 일반적인 지식, 나는 펜을하려했지만 몇 가지 주요 개념 / 모범 사례 / CSS의 RE-사이클링을 가능하게하려면 다음과 프레임 워크를 만드는 들어갔 생각.에게 이것은 막에 있으며, 최근의 CSS 악대차 나면, 몇 가지의 CSS 개발자들이 도움이 될 것입니다 희망!
명명 규약을 사용하여
이것은 CSS / HTML 재사용 가능한 제작에 가장 중요한 요소가되고있다. 페이지 요소에 일관된 이름을주는 것은 거의 수정 페이지의 구성 요소와 자신의 스타일의 재사용을 가능하게합니다. 이 인수가있는 라인에서, 비록 HTML5는 그것의 전임자에 대형 변화 변화에 몇몇 구조적인 태그 즉 소개하는 것입니다. <article>, <section>, <header>, <aside> 및 <nav> [ HTML5가 무엇을 가져올 것인가? ]. 심지어 HTML 4 (또는 낮은)과 함께, 그것은 consistanly 아래의 간단한 예제와 같이 페이지의 표준 섹션 이름을 지정하는 것이 가장 좋습니다 ...
단, 프로젝트의 대부분의 페이지는 같은 코어 구조적인 요소를 가지고 있어야 해요. 이러한 공통 핵심적인 페이지 요소를 식별합니다 ....
<div id="container"> <div id="header"> ... </ 사업부> <div id="nav"> ... </ 사업부> <div id="sidebar"> ... </ 사업부> <div id="footer"> ... </ 사업부> </ 사업부>
기본 스타일 (CSS 재설정)을 재설정 : 당신이 프레임 워크를 사용하거나 직접 작성하든, 당신은 CSS를 재설정을 제공해야합니다 [ CSS를 재설정은 무엇입니까? ], 그들은 감소하거나 때로는 다양한 브라우저 사이에 발생하는 시각적인 불일치를 제거로. 간단하게 말하면 CSS를 재설정 메커니즘 따라서 그들이 포즈 수있는 브라우저 기본값을 무시할 제로 또는 NULL 값으로 HTML 요소의 스타일을 설정합니다. 이것은 모든 사용자 에이전트 기본값 이러한 요소 공극 [의 속성 설정 깨끗한 슬레이트 제공 CSS2.1 사용자 에이전트 스타일 시트 기본값 ]. 모든 CSS는 프레임 워크가 재설정 메커니즘을 가지고 않습니다. 당신이 자신의 CSS를 재설정을 작성하는 경우에는주의의 단어는 키 속성을 다시 설정하는 것을 잊지에있다면, 그것은 디버깅하기가 매우 어렵습니다 교차 브라우저 문제로 이어질 수있다는 것입니다. , 기억 리셋 스타일의 사본을 보관하고 만들고 각각의 새 프로젝트로 그들을 놓습니다.
몸, 사업부, DL, 안녕, DT, DD, UL, 리, H1, H2, H3, H4, H5, h6, 사전, 형태, fieldset, 입력, 선택, textarea, P, 인용구, 테이블, 일, TD { 테두리 : 0px; 여백 : 0; 패딩 : 0; }
설정 기본값 (베이스 라인 스타일) 요소 :
당신이 (제로 또는 null로) 특정 HTML 요소의 특정 속성의 기본값을 설정한 후, 그것은 이러한 요소의 모든 인스턴스에 걸쳐 몇 가지 스타일을 적용할 필요가 있습니다. 이러한 기본 설정은 디자인에 따라 달라질 또는 다음과 모범 사례에 따라 수 있습니다.
대부분의 CSS는 프레임 워크는 항상 기본 브라우저 스타일을 다시 설정 이외에 몇 가지 새로운 기본값을 소개합니다.
이러한 기본값은 사용자 에이전트 기본값 (CSS를 재설정하여 버릴)의 무효되고, 이들은 브라우저에 걸쳐 일관성있게 될 것입니다.
기억하세요,베이스 라인 스타일은가는가 디자인 전체에 사용될 스타일을 설정하는 데 사용됩니다. 예.
HTML {글꼴 크기 : 77 %; 글꼴 모음 :이 Arial, 산세 리프 - 리프;} 강하고, H1, H2, H3, H4, H5, h6 {글꼴 두께 : 굵게;}
일반적인 HTML 요소와 공통 클래스에 대한 추상 스타일 :
이러한 구성 요소가 프로젝트에 걸쳐 다시 사용되므로 여러 페이지로 구성된 대부분의 프로젝트가 만들어지면, 경고 및 오류, 사용자 정의 팝업, LightBoxes 등 예 : 일종의 사이트에서 사용 일반적인 HTML 요소를 가지게 될 것이며, 그것을 제공하기 위해 도움이 될 것입니다 이러한 구성 요소에 대한 사전 정의된 스타일과 관련된 클래스 집합 그리고 당신은 자신에게 많은 시간을 절약할 수 있습니다.
이외에도 일반적인 HTML 요소에 대해 재사용 가능한 스타일 정의를 정의로부터, 우리는 추상적인 스타일 클래스는 활판 인쇄술, 색상, 심지어 레이아웃에 관한 수 있습니다. 나 자신이 사용하는 경향이 ... Clearfix, Font08, FontGrey, AlignL, DisplayB 등 일반적인 수업을
양식 입력 {테두리 : 0px; 배경 : # FFFFFF; 패딩 : 0px 10px; _padding : 0px 0px; 높이 : 26px; 색상 : # 000000; 라인 - 높이 : 30px; 글꼴 크기 : 1.1em;} 양식 textarea {국경 : 0px; 배경 : # FFFFFF; 색상 : # 000000; 글꼴 크기 : 0.9 그들; 라인 - 높이 : 1.5em; 오버플 : 보이는;} . fbold {글꼴 두께 : 굵게; 색상 : # cccccc;} . fgrey {색상 : # 666666;} . flightgrey {색상 : # bbbbbb;} . {맑은 : 모두;} clearfix . 분할기 {국경 - 상단 : 1px 고체 # 647B06, 국경 바닥 : # 9CC00A 1px 고체, 높이 : 0px;} . displayb {디스플레이 : 블록;}. displayn {디스플레이 : 없음;} . alignr {텍스트 정렬 : 오른쪽}. alignc {텍스트 정렬 : 센터} . floatr {플로트 : 오른쪽;}. floatl {플로트 : 왼쪽;}
일반적인 브라우저 만지면에 대한 수정
다양한 브라우저의 CSS 코드를 구현하고 CSS 사양에 대한 지원의 다양한 레벨을 제공합니다. 이것의 결과 .... 우리 개발자들이 달려들어 남아 있는지 "브라우저 만지면". 특히 IE6 지켜야 할 기사 마감 시간과 함께 대부분의 CSS를 탄생 하였다들을 괴롭 힙니다. 좋은 소식은 경험이 이러한 문제를 (종종 되나을 함께 가능한 재사용 가능한 수정을 가져왔다는 CSS를 해킹 ).
, 기억이 해킹 / 수정이 편리한 유지
/ * 다음과 같은 줌 : 1 규칙 IE6 + IE7을 위해 특별히입니다. * / * HTML. clearfix, * :. 첫 아이 + HTML clearfix { 줌 : 1; }
당신의 CSS를 세부 조정 유지
마지막으로. 당신이 영감과 CSS 프레임 워크 중 하나 이상을 사용하려는 경우, Heres 몇 가지 인기있는 것들의 빠른 목록입니다 ....
CSS는 프레임 워크를 사용하면 자신 중 하나를 만들 수 게으른 것을 의미하지는 않습니다 ... 그것은 당신이 다른 사람의 경험과 실수에서 배운다 시간과 생산성을 저장하려면 스마트는 것을 의미, 기억!!
CSS는 올해 10 년 존재를 완성! CSS를 사용하여 빵 (또는 없음) 수입, 잠시 여기 자들, 그러면 우리가 글꼴의 좋은 선택을 위해 굶주리고있다 방법을 알고 수도 있습니다. 심지어 글꼴의 부족과에서 그 같은 디자이너들이 CSS를 선 가든은 자신의 디자인에 몇 가지 정의를하는 추구 글꼴을 대체할의 CSS 배경 이미지의 사용을 만들었습니다. 우리는 또한 플래시 / 자바 스크립트 ® 해킹 우리의 설계 목표를 달성하기 위해 노력했습니다. 의미없이 이것은 우리의 웹 디자인에 원하는 글꼴을 얻을 수있는 길을 잘못이지만, 확실히, 그것은 가장 바람직한 방법은 아닙니다. 그리고 년간 웹 디자이너를 통해, 나처럼 완벽하게 자신의 설계를위한 열 가지 정도 글꼴에 의존했습니다.
웹 표준 및 글꼴 형식의 최근 발전은 똑같은 기본 글꼴 이외 typefaces에 HTML 텍스트를 렌더링하는 것이 가능합니다. "@ fontface"CSS의 decleration된다.
@ fontface는 실제 글꼴 파일에 연결하고 웹을 통해 조회할 수있는 솔루션을 provids. @ fontface를 사용하여 설계자는 배경 이미지와 텍스트를 고정하지 않고 글꼴을 사용할 수 있습니다. 구현은 아주 스트레이트 포워드 아래와 같이하지만 모든 좋은 것들이 그것에 CON 부분을 가지고로서, 모든 브라우저는 하나의 "글꼴 유형"을 지원합니다. 당신은 크로스 브라우저 지원을 필요로 사이트에 @를 fontface을 사용하도록 계획하고 계신다면, 다음 같은 다양한 글꼴 유형으로 소스를 제공해야합니다.
@ fontface 사용
@ 글꼴 얼굴 { 글꼴 - 가족 : "CalligraphyFLFRegular '; SRC : URL ( 'CalligraphyFLF.eot'); SRC : 지역 ( 'CalligraphyFLF'), 지방 ( 'CalligraphyFLF'), URL ( 'CalligraphyFLF.woff'형식 'WOFF'), URL ( 'CalligraphyFLF.ttf'형식 '트루타입'), URL ( 'CalligraphyFLF . SVG # CalligraphyFLF '형식'SVG '); } @ 글꼴 얼굴 { 글꼴 - 가족 : "당신의 글꼴"; SRC : URL ( "글꼴 / font_filename.eot"); SRC : 로컬 ( "대체 이름"), 지방 ( "Alternatename") URL ( "글꼴 / font_filename.woff") 형식 ( "WOFF") URL ( "글꼴 / font_filename.otf") 형식 ( "오픈 타입") URL ( "글꼴 / # font_filename를 font_filename.svg") 형식 ( "SVG"); } H2 {글꼴 가족 : "당신의 글꼴", 조지아, 리프;}
당신이 위의 예제에서 볼 수 선택된 글꼴 글꼴을 포함 마찬가지로, 하나는 같은 글꼴에 대한 fonttypes의 집합에 연결해야한다. 그래서 사람들은 "글꼴 키트"으로 참조하십시오.
명시적으로 최종 사용자 사용권 계약 (EULA)에서 거기에 CSS의 @ 글꼴 얼굴 속성과 연결 허용 가능한 글꼴 키트가 있습니다.
유용한 WebFont 자료 :
시간과 반복을 때 행동 본 모든 다른 브라우저로 W3C 규칙, 울화통를 던지는에 의해 개발 정신의 IE 나선 당신을 만나고에게 말하길, 그 수정을하지 않는 것 같습니다. 단지 그러한 하나가 IE7에서이 문제입니다.
문제 계산서 :
I와 너무 다른 심각한 웹 개발자의 대부분은 몇 가지 링크 (앵커 태그) 위로 마우스를 가져가면에있는 레이아웃에서 수레를, 거기에 중첩 많은 시간, 이상을 발견했을 수도, 포함하는 컨테이너는 오른쪽으로 몇 픽셀을 이동하는 것 . 나는이 문제에 대한 Google 솔루션하려 하겠지만 거의 이유에 대해 어떠한 합리적인 해답을 찾을 수 없었 그것 발생할 때 (상황에서이 문제를 방지하는 데 도움), 따라서 나도 문제에 대한 명확한 해결책을 찾은 적이 없다 ...
가능한 해결 방법 :
경험을 버리고,이 문제는 잘못된 행동 컨테이너의 CSS 정의에 확대 속성을 추가하여 해결되는, 시대 즉, 통지 90 % %가 있는데 ...
# somediv { 줌 : 1; }
또 이유가 모호할 때가 있습니다 ... 이것을 시도 ...
IE의 일부 요소는 기본적으로 '참'이다 "hasLayout"재산을 보유하고 있습니다. 많은 시각적 CSS의 행동, 예를 들어, 알파 필터는 해당 hasLayout 요소에서 작동합니다. 그리고 {줌 : 1} 대상 요소에게 hasLayout 속성을주는 것 같습니다 .... 유용한? 나는 그렇게 생각하지 말아 ...
줌 속성은 또한 크롬에서 지원하는 것 같습니다되어 있지만 사용 힘 내 레이아웃에서 크게 나쁜 영향을 만들 것 ... 그것이 당신을 위해 작동한다면, 그것을 시도 ... 그렇지 않다면, "CSS의 크랩"아래에이 페이지를 즐겨찾기에 추가
어제, 구글 크롬에서 CSS를 재설정과 함께 발생한 문제에 후 ... 난 사용자 에이전트 스타일 시트의 영역으로 깊이 비트를 파고 생각 ...
CSS2.1 사용자 에이전트 스타일 시트 ... (무엇을 "사용자 에이전트 스타일 시트"를 인식하지 못하는 분들은 다음과 곳입니다의 기본값에서이 테이블을 발견 사용자 에이전트 스타일 시트 (사양) 무엇입니까 .
CSS 2.1 사용자 에이전트 스타일 시트 기본값의 전체 목록을 보려면 여기를 클릭하십시오
어제, 다른 모든 '그라운드 호그 데이'처럼 약간의 CSS / tableless 레이아웃에서 작업되었습니다. 모두 IE 7, FF 3, 크롬에서 잘 진행되고 있었고, 전까지 갑자기 뭔가가 취소 ignorable 마진에만 Google 크롬에서 본 것을 보았다. 아주 이상하고 worring지만, 그것이 제가 accross 올 것을 몇 가지 새로운 버그 / 문제가 있었는데, 내 일상 업무의 일부 향신료 드디어있었습니다. 슬픈는 (그러나 좋은) 그것은 프로브의 몇 분 이내에 해결 했어요 ...
Google 크롬 내 CSS를 재설정합니다 (: 0px 여백) 무시처럼 기본적으로, 그것은 보였다. 그것은 실제로 사용자 에이전트 스타일 시트 (-웹킷 - 패딩 - 시작 : 40px)에 의해 발생되었다. 0 오작동 요소 : 그럼 해결책은 패딩을 설정하여 해당 스타일을 다시 설정하는 것이었습니다.
어떤 요소에 일어나고부터이 문제를 방지하기위한 좋은 방법은 다음과 같이 세계의 CSS 레스트를 사용하는 것입니다
* {여백 : 0; 패딩 : 0;}
사용자 에이전트 스타일 시트 (사양)이란 무엇입니까?
다음 발췌문은에서 가져옵니다 http://meiert.com/en/blog/20070922/user-agent-style-sheets/ 사용자 에이전트 스타일 시트에 자세한 내용을보실려면 후속 링크
하지만 틀림없이 일상 - - 방식으로 CSS 1은 각각의 사용자 에이전트 (UA, 종종 '웹 브라우저'또는 '웹 클라이언트') 합리적으로 문서를 제시 기본 스타일 시트를 가질 것이라고 진술하여 아이디어를 소개합니다. CSS 2는 부합하는 사용자 에이전트가 기본 스타일 시트를 적용해야합니다 (또는 그들이했던 것처럼 행동)과 사용자 에이전트의 기본 스타일 시트가 문서 언어에 대한 일반적인 프레 젠 테이션의 기대를 충족 방식으로 문서 언어의 요소를 제시해야한다고 말한다; CSS 3 같은 마음이 될 가능성이 높습니다.
CSS의 사양은 '진짜'스타일의 기본 표시를위한 시트 또는하지를 사용하는 여부 구현에 맡기 때문에, 그것은 당신이 모든 브라우저의 설치 폴더에 기본 스타일 시트를 찾을 수없는 놀라운 없어. 마이크로 소프트의 인터넷 익스플로러뿐만 아니라 오페라와는 달리, 예를 들면 (그리고 내가 아는 한), 파이어 폭스와 넷스케이프 네비게이터 ( "html.css"를 찾습니다)뿐만 아니라, Konqueror에서 같은 도마뱀 붙이 브라우저는 기본 스타일을 이해하는 것이 비교적 간단합니다.
또 빠른 차다. 여기 간단하고 CSS의 전원을 사용하여 좋은 일이에요 ..하지만 처음부터 어려운 concieve (그리고 그것이 반드시 내가 아냐)했습니다. Dropshadow를 추가하면, 포토샵 anf 불꽃놀이 등 편집 도구를 몇 가지 이미지를 사용, 우리 중 많은 케이크 peice 수도
제가 CSS를 이용한 드롭 섀도우를 위해 사용하도록 선택한 이유는 일반적으로 응용 프로그램의 페이지 디자인 / HTML을 만드는 동안, 요건 iterating 유지한다는 것입니다. 제가 freinds 목록 또는 이미지 갤러리를 표시하는 것과 같은 다양한 이미지와 기존의 웹 사이트에 가서는 무슨 뜻인지, 그것을 위해, 재처리 이미 추가하거나 그림자를 제거하는 언로 드했던 이미지의 전체 하중에 어려울 것입니다 문제.
이러한 여분의 부서 또는 추가할 HTMLS을 만드는 동안 좀 성급 생각했을 그렇다면 일반적으로 상황이 당신이 XSL, PHP에서 이러한 아이콘 / 축소판을 생성 루프 로직을 가지고있다는 것입니다. 자바 또는 다른 프로그래밍 / 스크립트 언어 당신이 언제든지 추가할 수 있습니다 다음, 연기 토록 요구 사항을 변경하는 클라이언트에 따라, CSS의 디스플레이 속성을 사용하여 이러한 그림자를 숨기고의 문제가 ... 내가 앞으로 생각하고 이런 일을 havn't 전에도 ...하지만 ahev 지금 시작!
아래 예제에서 원본 이미지는 그림자 무료이며 dropshadows이 필요한 경우 적용됩니다! 또한, 생각을 내 앞에서 혀를의 기술 (Well! 이들은 아마 자습서의 짧은 다양하므로 그것만이 그들을 '차다'의 호출 정당)을 사용하여, 약간의 여분을 간 CSS 클립 속성을 사용 과시에 대해서만
내가 왜 이것을 이해할까요?? Humm ...!!
CSS의 작가 대부분은 CSS의 클립 속성이 대부분 취소 사용되는 CSS 속성 중 하나입니다 동의할 것입니다. 그것은 내게도 그렇게 사실과 내가 수정 시작하기 전에는 그것을 소홀히하는 것이 가장 행복 했어요 MOOTOOLS 두 노브 (핀) 슬라이더 구성 요소 (범위 표시기 포함) .
슬라이더 범위를 나타내는 데 이어 backgroud 이미지를 (가변 폭 부문에 대한)를 사용하여 슬라이더 구성 요소를 수정하는 구성 요소 사용자 중 하나에서 좋은 제안이 있었다. 따라서 재미 있지만 CSS 클립 속성의 바다 (ME 당연히)를 해제 전세를 입력하는 시간이 왔어요.
글쎄! 그것은 얼마나 어려운가 될 수 있습니까? 별로요도 전혀 ... 그렇기도하고 아니기도합니다. CSS의 클립 속성을 사용하는 문법은 꽤 똑바로지만 의미 / usuage 조금 croocked입니다. 내것과 같은 메모리로 매번 내 슬라이더 스크립트에 재작업에 앉아서 ... 내 자신에게 내 스크립트에서 만든 논리를 상기시켜,이 클립 속성의 사용으로 언급 tokeep이 있는데 .... 그래서! 그 미래의 (그리고 또한 보이는 자들의 이익을 위해 CSS 클립 속성에 의해 boggled) 기억 희망으로 펜을 내려으로 생각
CSS의 클립은 무엇입니까?
클립은 CSS 2.1 시각 효과 모듈의 일부입니다. 간단히 말하면, 그것의 임무는 따라서 추가 파일을 (나는 이미 슬라이더 구성 요소에 더 사용이 기능을 삽입한 만들 필요없이 이미지를 클리핑하고 축소 이미지를 생성, 이어중인 개체의 위에 보이는 창을 배치하는 것입니다 
)
CSS의 클립 속성을 사용하면 rect 모양을 사용하여 클리핑을 만들 수 있습니다. rect를 사용하여 많은 다른 CSS 속성 (여백, 패딩 등 등), 마찬가지로 필요 네 좌표 위쪽, 오른쪽, 아래쪽, 왼쪽 (TRBL). 당신이 네 개 좌표를 (잠시 던지기로 두뇌를 전송)를 사용하여, 클립 클리핑 영역을 계산하는 방법에 더 자세히 살펴봐야 할 때이 속성의 croocked 자연 반영합니다. 이제 혼란 하단은 상단에서 시작, 오른쪽은 왼쪽부터 시작됩니다. . 당신은 내가 하는말 보이지? .... 따라서이 게시물을 ...
이것은 약간의 혼란은 쉽게 아래와 같이 CSS를 클립 / rect 재산의 시각적 설명과 함께 사라질 수있다!!
우리가 시작한 작업은 (또한 광각 이미지) squarer 원하는 이미지로 다음 썸네일 이미지를 고정하는 것입니다
| |  |
| 기존 Thumbnal / 이미지 | Sqaure Thumbmail 용 클립 요건 |
우리가 테이블 셀 내부에 일부 내용을 정렬, 우리의 페이지 레이아웃을 만드는 CSS로 처리해야만하기 전에 그냥 애들 장난 같았다. 간단히 "정렬"또는 원하는 정렬, 케이크 조각을 가지고있는 테이블의 "valign"속성을 설정합니다!
우리 요소 속성을 "수직 정렬"가 불구의 CSS 레이아웃을 통해, 그것은 "정렬"또는 "valign"등록 한 간단하게 될 것 같지 않습니다. 더 specifiic 될 수있는 "수직 정렬"크로스 브라우저 CSS의 조각을 작성하고 특히, 귀하의 문제를 해결할 것 같습니다하지 마십시오.
HTML 테이블의 사용없이, 객체 중심의 문제는, 그것 이미지 또는 함유 부문에서 일부 텍스트, 아마도 언젠가는 모든 UI / CSS 개발자 악몽이었습니다합니다. 이 문제는 더 이상 중심되는 개체가 자연 속에서 역동 경우 그 높이가 변수되면, IE를 정렬에 대해 걱정을 extrapolates (알 수없는 높이).
우리가 감당해내야만 브라우저의 범위에 걸쳐 효과적이라 알려진 바로 앞으로 해결책이 없다지만, 난 않습니다 도착하려고했는지 솔루션 (IE6, IE 7 전에 그것을 시도했다고 몇몇 브라우저에서 작동하는 것 , FF).
해결 방법 :
모질라, 오페라와 사파리와 같은 브라우저에서 이상한 속성이 단순히 "테이블 셀"(디스플레이 : 테이블 셀)에 포함된 부문의 '표시'속성을 설정하여, 그 감각에 회부 수있는 '수직이 정렬 "행동 .
문제는 아직, 아직 그들이, 그들은 단지 그것을 무시 마찬가지로 "테이블 - 셀"속성과 무지로 무엇으로 이해하는 사람이 아닌 것 같은데, 브라우저의 IE 가족과 함께 남아있다. 이런 일을하려면 HTML로 간단한 광고를 몇 가지 더 DOM 요소지만, 아래에 주어진 솔루션입니다.
CSS와 HTML은 다음과 같습니다
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML : -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> 전망 <br/> : 3,456 </ 사업부를>
</ 사업부>
</ 사업부>
결과는 다음과 같습니다 : -
여기 데모를 볼 | 다운로드 소스 파일 (451 회 다운로드)
TOP은 CSS를 정렬
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML : -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>
결과는 다음과 같습니다 : -
아래는 CSS를 정렬
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML : -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>
결과는 다음과 같습니다 : -
내가이 정렬 문제에 대한 합리적인 해결책을 찾기 위해 노력 이후, 나이처럼 보인다. 그러나 이제는이 솔루션과 함께, 나는 작은 평화에서 느낍니다.
그 언젠가는 희망이
여기에 위의 솔루션의 CSS와 HTML 다운로드 (451 회 다운로드) .. understandability 들어, CSS는 최적화되지 않습니다
PS : 그리고 참, 그 내가 클릭한 일부 사진의 작은 이미지입니다 ...
비 IE 브라우저를위한 CSS : 그것의 더 아래 예제처럼 CSS 아동 선택 자이 IE에서 작동하지 않습니다, CSS 개발자 뉴스가 없습니다.
예 사업부 의미> 스팬 {일부 CSS}, "스팬 요소는 분열 요소의 자식 (그리고하지 손자 또는 증조 자녀 등)이있을 때."
그러나 우리의 장점이 CON를 사용했습니다. 역사적으로, 아동 선택기는 IE에서 CSS 명령을 숨기기 위해 사용되었습니다. 간단하게 배치하여 html>body 어떤 CSS를 명령 IE의 앞에 그것을 무시합니다 :
html>body .foo { CSS commands go here ;}
때문에이 작동 <body> 항상 자식 <html> - 그것은 물론의 손자 또는 증손이 될 수 없다 <html> .
이제 IE 7은 하위 선택을 이해하는 당신은 간판보다 큰 후 직접 비어있는 주석 태그를 삽입해야 IE 7은 다음이 선택기를 (왜 누가 알아!?) 이해되지 않으며, 따라서 전적으로이 CSS의 명령을 무시합니다. :
html> /**/ body .foo { CSS commands go here ;}
이미 전에 본하지 않은 경우뿐만 아니라 다음을 통해 읽기를
