프런트 엔드 요약 작업에서 발생하는 문제

1. 버튼 내부 자간 피치 조정 텍스트

문제 설명 : 텍스트의 좌우 중앙에 할 수없는 현대적인 브라우저를 설정 한 후, 잘 될 것입니다
이유 : 마지막 단어 뒤에 거기에 간격이 존재
해결 방법 : 사용 공간을 해결하기 위해, 또는 paddding 왼쪽으로 : 해결 2 픽셀

2. 호환 ie6,7,8 투명 배경의 콘텐츠 불투명 솔루션 :

RGBA (A, B, C, 0.8)
필터 : ProgID가 : DXImageTransform.Microsoft.Alpha (불투명도 = 80);
-ms 필터 "의 ProgID : DXImageTransform.Microsoft.Alpha (불투명도 = 80)"; // 때때로 문제

3 행 간격이 제공된다
라인 높이 : 개 / %를;

4. 텍스트 그림자 CSS3
텍스트 그림자 : H-V-그림자 그림자 블러 컬러; 참조 하늘의 꿈 http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html

INPUT 블록 그림자 CSS3
박스 그림자 : H-V 그림자 암흑 색 흐림의 인셋 확산; w3plus 참조

6. IE8 마진 탑 실패에서

- DIV 위 DIV 절대적 위치 또는 설치 무효 DIV하에 IE8 마진 정상 플로팅되면
용액 : 개별적 IE8 플로트에 해킹 제공하거나, DIV 절대 위치 인 경우, 시프트시킬 수있다 . 사업부는 아래
-도 설정되지 않은 부모 요소 테두리 부 요소 설정 마진 정상 무효
용액 : 부모 요소 배치 오버플 : 숨김, 부모 구성 요소는 투명 테두리 제공되고, 마진 톱 변화 패딩 탑로서

7. JS없이 유사한 기능 자리 달성
<입력 유형 = "텍스트"값 = " 경우 (: 당신의 이름을 입력하세요"onfocus 및 = "자바 스크립트 this.value = ' 당신의 이름을 입력하세요') {this.value를 = '를 ';} "에 onblur ="자바 스크립트 : 만약 (! this.value) {this.value =' 이름을 입력 ';} "클래스 ="이름 "NO ="0 "/>

8. 수직 텍스트 (몽골어 같은)
임시 사용 리튬 플로트 용은 폭 폰트 크기를 해결하기
TB-RL 특성이 달성 될 수 있고, 또 다른 브라우저가있다 : 즉, 쓰기 - 모델을

9. 입력 문자 입력 상자가 수직 표시 입력

- 입력 프레임 효과 세로 쓰기 모델 지지체 속성 즉 브라우저를 달성하기 위해, 다른 브라우저 발견 쓰기
</ 텍스트 영역>을 달성 할 수 있고 열을 정의 <행 = "10"= 텍스트 영역의 COLS를 "1."> - OK,하지만 스크롤 막대가 표시됩니다.
style.overflow-X 컨트롤 속성을 사용하여 스크롤 막대 텍스트 영역 텍스트 필드가 켜져 설정할 수 있습니다. 예를 들면 : : 다음과 같이 오버 플로우-x 속성 컨트롤에게 스타일 속성을 증가, 텍스트 필드의 가로 스크롤 막대를 숨기려면
<텍스트 영역 ID = txtComments 스타일 = "오버 플로우가 엑스 : 숨겨진"> </ 텍스트 영역>
적절한에, 감추기 수직 스크롤 바 :
<텍스트 영역 ID = txtComments 스타일 = "Y 오버플 : 숨김"> </ 텍스트 영역>
코드 제어, 그것은 다음 코드 달성하는 것이 필요할 수있다 경우
. document.all ( "txtComments") = style.overflowX를 " "숨겨진;
오버플-X, 가능한 값 오버플 Y : 표시 (기본값), 숨겨진, 자동 스크롤이.

10. 특수 폰트
폰트 패키지 기술을 배경 처리

배경색을 설정하는 옵션이
옵션 태그 스타일 첨가 = ""; (CSS가 효과가 제공되지 않는다)

12. 전화 번호 일반 (이상)
/(^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$)|(^(0|86|17951 ) (13 [0-9]? | 15 012,356,789] | (17) [678] | 18 [0-9] | 14 [57]) [0-9] {8} $) /


13. 전화 폰트 크기

글꼴 크기 1rem = 12 픽셀 내부 HTML 배치 된 
다른 해상도가 상이한 크기에 대응
일반적 16px 크고 375 14,414 16px 대응 대응 320 12 픽셀로 전화 대응
HTML {글꼴 크기 : 62.5 %; / * 10 ÷ 16 × 100 % = 62.5 % * /}
체 {폰트 크기 : 1.4rem / * = 1.4 × 10px 14px * /}
{폰트 크기 H1 : 2.4rem / * = 2.4 × 24 픽셀 10px * /}

14. 버튼 입력 버튼의 텍스트 중심되지
패딩 라인 높이 해결

15. IE 부모 요소 플로트 : 왼쪽, 자식 요소 플로트 : 오른쪽 상기 부모 요소 세트의 폭과 높이, 플로트 아니다 : 왼쪽 실패
해결 : 부모 요소의 폭이 제공된다

(16) 거품이 나타납니다가, 숨기기에 다른 곳을 클릭하는 메뉴를 클릭 (이벤트의 흐름)

// 몸에있는 모든 요소를 한 번 클릭 숨겨진 메뉴 #A 요소, 메뉴를 클릭하고
( "#의 A") $을. ON (이하 "클릭", 기능 (E)을 {
$ ( "# 메뉴"). 쇼 ( );
$ (문서)가 사실 말이다 ( "클릭", 기능 () {
$ ( "# 메뉴") 숨기기 ();
});
e.stopPropagation (); // (방지)이 트래핑
)};
// 클릭 메뉴 자체는 캡처 방지하기 위해
ON $ ( "# 메뉴"() "를 클릭", 기능 (E) {.
e.stopPropagation를 ();
});

(17) 의 값 드롭 다운 목록을 얻을 jQuery를
$ ( "# 선택") : 값이 선택된 옵션 선택 인수 찾을 수 있습니다 ( "옵션 : 선택") 발을 (); ..
참조 블로그 http://blog.csdn.net/ cui_angel / 기사 / 세부 / 8000432

18. 슈퍼 단순한 수평 아코디언 코드 JQuery와

链式操作的体现
$ ( "NUM.") 클릭 (함수 () {.
$ (이) .CSS ({ "배경색".. "#의 c20000은"}) 발견 ( "H1") CSS ( " "); 색상", "#의 FFF
.. $ (이) .parent () 형제 () (찾을 수 있습니다."NUM ".) CSS ({"배경 색 ":"#의 e5e5e5 "} H1) 발견 (." ") .CSS ("색상 ","#의 8a8a8a; ")
DIV $ (이) .parent () 형제 () 발견 (.."마지막 ") CSS ({폭 : 0}.);
$ (이) . 다음 내용 () 애니메이션 ({폭 "315px"}, 500)
});

추천

출처www.cnblogs.com/lanlanJser/p/11874860.html