Почему я получаю сообщение об ошибке «Элемент 'style' не может быть вложен в элемент 'style'"? - PullRequest
Новая
       2

Почему я получаю сообщение об ошибке «Элемент 'style' не может быть вложен в элемент 'style'"?

15 голосов
/ 06 декабря 2011

Мне нужно переопределить некоторые элементы <style> на моей странице Razor, поэтому я вставил стили сразу после открывающего блока кода: 

@{
    ViewBag.Title = "New Account";
    Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
    #main
    {
        height: 400px;
    }
</style>

Страница корректно отображается в браузере, но Visual Studio зеленыйпри <style> жалуется, что: 

<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>

Я дважды проверил главную страницу - никаких проблем там не выделено.

Что ожидает Visual Studio на этом этапе?Как правильно переопределить стили на постраничной основе?Через jQuery?

Ответы [ 6 ]

26 голосов
/ 06 декабря 2011

Элемент style не может быть вложен в <body> или дочерние элементы <body>, вместо этого он должен перейти к элементу <head> страницы.

Если вы попытаетесь переопределить стилинапример, они вставляются в секцию по умолчанию на странице макета с помощью @RenderBody(), которая, как я полагаю, находится внутри <body> на странице макета, в то время как стили по умолчанию все еще остаются в <head>.

* 1010.* Правильный способ переопределить некоторую часть страницы макета со страницы содержимого будет выглядеть следующим образом, используя разделы Razor:

_layout.cshtml 

<head>
@if (IsSectionDefined("Style"))
{
    @RenderSection("Style");
}
else
{
    <style type="text/css">
    /* Default styles */
    </style>
}
</head>
<body>
@RenderBody()
...

page.cshtml 

@{        
    Layout = "layout.cshtml";
}
@section Style
{
    <style type="text/css">        
    #main        
    {        
        height: 400px;        
    }
    </style>
}
<!-- Body content here -->
...

Теперь, если на странице содержимого определен раздел Style, его содержимое будет переопределять значения по умолчанию со страницы макета.

Я предлагаю вам прочитать больше о макетах и ​​разделах Razor.Хорошую статью об этом ScottGu можно найти здесь .

Относительно предупреждений о проверке разметки Visual Studio

В Visual Studio возникает проблема, когда разметка, составляющая одну страницу,распределяются между различными файлами, как это.В большинстве случаев Visual Studio (или любая подобная IDE в этом отношении) не может знать, как различные фрагменты страницы будут динамически объединяться в конце.Поэтому обычно вы не можете избежать некоторых из этих предупреждений в проекте.

Лично я игнорировал бы предупреждения, если бы я знал, что я делаю, и полученные страницы проходили проверку разметки (http://validator.w3.org/).

Если вы действительно хотите скрыть предупреждения, вам необходимо отключить соответствующие параметры проверки в Visual Studio. Например, для HTML в Visual Studio 2012 это можно сделать в меню «Инструменты»> «Параметры»> «Текстовый редактор»> «HTML»> «Проверка».

3 голосов
/ 26 марта 2012

Это похоже на причуду использования Razor. Валидатор не может «видеть» весь HTML-код, потому что он разбросан по нескольким файлам с использованием логики Razor, чтобы снова собрать все воедино.

Уловка, которую я только что выяснил, заключается в том, чтобы "скрыть" <style> и </style> от валидатора. Вместо: 

<style>

использование: 

@MvcHtmlString.Create("<style type\"text/css\">")

И вместо: 

</style>

использование: 

@MvcHtmlString.Create("</style>")

Валидатор не понимает, что эти строки генерируют <style> и </style>, поэтому он перестает жаловаться на них.

Убедитесь, что вы используете @section XXX вокруг элемента <style>, где "XXX" ссылается на @RenderSection(name: "XXX", required: false) в главном файле, который находится внутри элемента HTML <head>. Это необходимо, чтобы убедиться, что элемент <style> вставлен в элемент <head>, к которому он относится.

1 голос
/ 06 декабря 2011

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

Из-за разделения содержимого во время разработки, я считаю, что некоторые предупреждения со страниц бритв можно безопасно игнорировать.

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

0 голосов
/ 16 января 2018

Я думаю, вы должны установить стиль в HeadContent 

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
     <style type="text/css">
        .hideGridColumn {
            display: none;
        }
    </style>
    
</asp:Content>

Это хорошо для меня.

0 голосов
/ 06 декабря 2011

Если вы просматриваете один исходный код на странице, как она выглядит в браузере, вы получили 

<style type="text/css">
 //some other style stuff, then

 <style type="text/css">
  #main
  {
    height: 400px;
  }
 </style>
</style>

Как и подразумевает валидатор.

Если страница проходит проверку W3 , просто игнорируйте VS.Я думаю, что это немного борется с бритвой.

0 голосов
/ 06 декабря 2011

Тег стиля должен быть в теге head, а не в теге body.

Вы должны создать область в теге head в макете и поставить styleтег в этом регионе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...