2013-08-19 2 views
0

следующая игра выглядит хорошо в IE 9, отступы и граница поля вычитаются из ширины из-за размера коробки: border-box. Однако, если я показываю тот же код, что и обычный html-сайт, добавление и граница добавляются к ширине, делая поле больше контейнера.IE9 показывает разные результаты одного и того же кода, если отображается в JSFiddle

Любые идеи, в чем проблема?

Вот скрипка, которая хорошо выглядит в IE9: http://jsfiddle.net/GgwNs/1/

Вот тот же код выглядит не очень хорошо отображается в виде HTML-сайта:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 

    <style type='text/css'> 
    .container 
{ 
    width: 300px; 
    height: 30px; 
    border: thin solid red; 
    margin-bottom:60px; 
} 
.content 
{ 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing:  border-box; 
    padding: 0 20px; 
    border: 5px solid #000 
} 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <input class="content" id="Text1" type="text" /> 
</div> 

</body> 

</html> 

Спасибо

+0

'-ms-box-sizing '? ur ожидает, что многие пользователи будут использовать IE8 beta 1? также, убедитесь, что вы показываете страницу в режиме стандартов IE9 (или IE = край) – PlantTheIdea

+0

большое вам спасибо! сделал трюк, полностью забыл об этом ... – user2550712

+0

np, плохо включите его в качестве ответа, чтобы вы могли поставить галочку. – PlantTheIdea

ответ

2

Убедитесь, что вы устанавливают стандарты с соответствующим метатег:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
Смежные вопросы