CSSer, как и другие ИТ-должности, сталкивается с вопросами, которые задает интервьюер, или с тестовыми заданиями, которые выдает при поиске работы. Сегодня мы собрали 8 распространенных вопросов на собеседовании, надеюсь, они будут вам полезны.
1. Стиль наведения не появляется после перехода по гиперссылке?
Стиль гиперссылки, по которой щелкнули, больше не имеет стилей наведения и активности. Решение состоит в том, чтобы изменить порядок атрибутов CSS: LVHA.
2. Проблема с двойным полем в IE6.
Например:
<style type="text/css"> тело {маржа:0;} div {float: влево; ширина влево: 10 пикселей; высота: 200 пикселей; граница: 1 пиксель, сплошной красный;} </стиль> |
После плавания исходное поле составляет 10 пикселей, но IE интерпретирует его как 20 пикселей. Решение состоит в том, чтобы добавить display:inline;
3. Почему текст в Firefox не может увеличивать высоту контейнера?
Контейнеры с фиксированными значениями высоты в стандартных браузерах не будут растягиваться, как в IE6. Итак, если я хочу иметь фиксированную высоту и растягиваться, какие настройки мне следует сделать? Решение состоит в том, чтобы удалить высоту и установить здесь минимальную высоту: 200 пикселей. Чтобы позаботиться о IE6, который не знает минимальной высоты, ее можно определить следующим образом:
| div {высота: авто! Важно; высота: 200 пикселей; минимальная высота: 200 пикселей; |
4. Почему цвет полосы прокрутки браузера IE нельзя установить в веб-стандартах?
Настройки оригинального стиля:
<style type="text/css"> body { полоса прокрутки-face-color: # f6f6f6; полоса прокрутки-выделения-цвет: # fff; полоса прокрутки-3dlight-цвет: # eeeeee; полоса прокрутки-стрелка-трек: # 000; -цвет:#fff; полоса прокрутки-темная тень:#fff; </стиль> |
Решение — заменить тело на html.
5. Как определить контейнер высотой около 1 пикселя?
Эта проблема в IE6 вызвана высотой строки по умолчанию, и существует множество решений, таких как: overflow:hidden | Zoom:0.08 |
6. Как сделать так, чтобы слой отображался на FLASH?
Решение состоит в том, чтобы установить прозрачность для FLASH:
| <a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1"> <param name="wmode" value="transparent" /> |
7. Как центрировать слой div в браузере?
<style type="text/css"> <!-- дел { позиция: абсолютная; верх:50%; слева: 50%; поле:-100px 0 0 -100px; ширина: 200 пикселей; высота: 200 пикселей; граница: 1 пиксель, сплошной красный; } --> </стиль> |
Здесь мы используем процентное абсолютное позиционирование и метод использования отрицательных значений вне патча. Размер отрицательного значения равен его собственной ширине и высоте, разделенным на два.
8. Решение проблемы центрирования вложенных тегов div в браузере Firefox.
Предположим следующую ситуацию:
<div id="a"> <div id="b"> </div> </div> |
Если вы хотите центрировать b внутри a, вам обычно нужно использовать CSS только для установки атрибута text-align a в центр. Этот метод выглядит нормально в IE, но в Firefox b будет слева;
Решение состоит в том, чтобы установить для горизонтального поля b значение auto. Например, установите для b стиль CSS: поля: 0 auto;