как избежать перехвата браузера, делая вместо этого определение «функции» ...?

Question

Итак, допустим, у меня есть элемент inline-block. Так что это не будет работать с ie6 или FF2 ...

Скажем, я компенсирую это с помощью CSS-хаков и использования -moz-inline-stack ...

Теперь предположим, что элемент inline-block также является position: относительным, поэтому он является контейнером и имеет дочерний элемент с абсолютной позицией, top: 0, right: 0.

В старых браузерах дочерний элемент находится в правом верхнем углу экрана, а не в правом верхнем углу элемента контейнера inline-block ...

Теперь я могу исправить это, обернув div вокруг моего дочернего элемента и сделать его «относительным положением» ... Но я бы хотел избежать ненужной разметки, если это возможно.

Изначально я хотел сделать:

if (browser == ie6 || browser == ff2) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

но я думаю, что-то вроде этого было бы лучше сделать:

if (child element is at the top right of the screen) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

Так что мне просто любопытно, как люди здесь будут рекомендовать такие вещи.

Спасибо!

Answer 1

В общем, Modernizr лучше всего распознает функции браузера. Modernizr

добавляет классы к элементу которые позволяют вам ориентироваться на конкретные функциональность браузера в вашем таблицы стилей. Вам на самом деле не нужно написать любой Javascript, чтобы использовать его.

Хотя это может быть неприменимо к вашему конкретному сценарию, Modernizr также обнаруживает функции CSS. Например,

Вы когда-нибудь хотели сделать if-заявления в вашем CSS для наличие интересных функций, таких как граница радиуса? Ну, с Модернизром Вы можете сделать это!