2012-05-03 5 views
7

tengo una página de diseño thuslyMVC3 - enlace 'Elemento '' no puede ser anidado dentro del elemento 'enlace'' - se trata de añadir página específica CSS

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
    <link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" /> 
    @RenderSection("JS", required:false) 
    @RenderSection("CSS", required:false) 
</head> 
<body> 
    @RenderBody() 
</body> 
</html> 

Y luego miras al igual que

@{ 
    ViewBag.Title = "Home"; 
    Layout = "~/views/shared/_layout.cshtml"; 
} 
@using RS.Common.HtmlHelpers; 
@section JS 
{ 
    <script src="@Url.Content("~/scripts/fue.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script> 
} 
@section CSS 
{ 
    <link href="@Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" /> 
} 

<h4>Test!</h4> 

La página se carga bien como esperaba. Sin embargo, yo estoy recibiendo advertencias: 3

Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link' 

este error, uno para cada uno de los etiquetas en la sección CSS en la vista.

En este momento, solo es realmente una molestia, pero me pregunté cuál sería la causa (y por lo tanto la solución) de este error.

Respuesta

9

Has especificado HTML5 DOCTYPE e intentas validarlo como XHTML 1.0 Transitional. Supongo que el HTML final renderizada se ve así:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <link href="/content/main_layout.css" rel="stylesheet" type="text/css" /> 
    <link href="/content/menu.css" rel="stylesheet" type="text/css" /> 

    <script src="/scripts/fue.js" type="text/javascript"></script> 
    <script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script> 

    <link href="/content/hp.css" rel="stylesheet" type="text/css" /> 
    <link href="/content/hp_form.css" rel="stylesheet" type="text/css" /> 
    <link href="/content/flexslider.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <h4>Test!</h4> 
</body> 
</html> 

Es posible que desee invertir el orden de los dos RenderSection en su diseño de modo que los enlaces y secuencias de comandos se agrupan. O también podría considerar mover las declaraciones del guión al final de la página:

De esta manera:

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" /> 
    @RenderSection("CSS", required:false) 
</head> 
<body> 
    @RenderBody() 

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
    @RenderSection("JS", required:false) 
</body> 
</html> 
+0

Eso es de hecho la razón y el diseño se ve mucho más claro, también. Gracias otra vez Darin. – glosrob

Cuestiones relacionadas