Ввод вложенных файлов не работает в Firefox

#html #css #cross-browser #nested #file-io

#HTML #css #кроссбраузерный #вложенный #file-io

Вопрос:

У меня есть следующий HTML:

 <input id="outer" type="file" onchange="console.log('No.');">
    <input id="inner" type="file" onchange="console.log('Yes!');" />
</input>

Стилизованный под такой:

 #inner { cursor: pointer; position:absolute; opacity: 0; }
#outer { position: relative; overflow: hidden; direction: ltr; }

Это выглядит как обычный элемент ввода файла, поскольку #inner элемент ввода скрыт и обернут #outer одним. Мое желаемое поведение — видеть «Да!» при выборе файла, который я получаю с помощью браузеров Webkit (активируются оба ввода), но не Firefox. У вас есть какие-либо идеи о том, как я могу получить это и в Firefox?

1. Не следует ли вам установить для свойства Z-Index внутреннего значения более высокое значение, чем для внешнего?

2. Спасибо, но я попробовал это, и это ничего не изменило. Z-индексы могут не влиять на элементы относительно их родителей.

Ответ №1:

Причина разницы в поведении, скорее всего, в том, что код неверен.

Смотрите HTML 4: 17.4 Элемент ВВОДА: «Начальный тег: обязательно, конечный тег: запрещено«.

Таким образом, вы не можете вложить входной тег в другой. Разные браузеры по-разному обрабатывают недопустимую разметку, поэтому они могут, например, игнорировать то, что один находится внутри другого, и размещать их рядом друг с другом, или полностью игнорировать внутренний тег.

Если вам интересно, вы можете использовать FireBug для проверки DOM, чтобы выяснить, какие элементы созданы из разметки, но это действительно спорно, поскольку неверная разметка в любом случае не будет работать надежно.