vs2010里面的视图怎么完美支撑HTML5
设计视图里面
谷歌浏览器中 展开
关于VS里的设计模式显示不正常的问题，是有多方面的，但这个问题并不是任何时候都需要解决。
下面分别说明几种常见的：
1、动态代码引起的预览不正确。
比如我做了简单的导航条效果：
，我在单独的css文件里写了样式，但是因为某种需要，我的css文件加载是代码写进去的。比如：
这时候，如果切换到设计视图下，由于css的地址是一个变量，或者是需要代码执行出来才有结果的，设计视图不可能知道此时css的地址是什么，自然也就没有办法正确的载入css文件。所以预览的效果就变成了：
但实际上，我运行出来，正确执行之后的效果是：
这是不是挺像你截图里描述的效果？从你的截图来看，你所有的样式都没有显示出来，因为css文件在预览的时候无法加载，执行之后，在生成页面的时候变量解释成了正确的地址之后效果就正确了。
所以我首先怀疑你的页面里，css连接的部分使用了某些动态的代码来实现。
如果是这样，这个问题根本就没有解决的必要。原因前面也说了，你怎么能要求vs去猜你的变量在还没运行时候的值呢？这才是变量的意义。
2、html代码的兼容性问题。
我们知道html有过好几个标准，而且不同的浏览器内核之间支持的部分还不完全相同。而vs中使用的是ie的内核。和你在谷歌浏览器中看到的效果有出入是很常见的问题。
比如同样的一个代码：
在IE和谷歌浏览器下运行出来的效果你看到差别在哪了吗？
毫无疑问的，VS的设计模式的确是使用的IE内核，请看设计模式下的预览：
所以，如果你的代码中存在这些兼容性不好的写法，那么是会出现一些不一致的。小的排版问题在内容比较多的页面里会产生一些互相的挤压和移位。导致整体页面变得乱七八糟。
如果是这种情况，那么你可以解决它，你要找到出问题的地方，替换成更兼容的写法。
3、html5和css3，以及可视化编辑器的问题
由于IE从IE9开始才能较好的支持HTML5和CSS3（但是还是比不上谷歌和FF），所以如果你的页面主要是以这些新的技术为主的话，那么确实在设计视图下可能会出现预览不对的情况。
但是我想说的是，可视化的编辑器始终只是一个参考，特别是VS，他的设计模式主要是方便开发人员拖放一些服务器控件上来，和调整他们的大致位置（一些容器控件的包含之类的），VS本身也在设计视图的时候加入了大量的辅助线框和一些占位的但是最后不会显示出来的东西。所以基本上不会有哪个成熟的开发人员真的会用设计视图来完成UI设计。
应该这样讲，这个设计视图的最大作用是用来参考，但不必太在意其中的细节，该有的东西有了，互相之间的包含关系对了，剩下的就看运行出来的效果。最终效果始终是以运行出来后浏览器的效果为基准，所以一般都是直接在vs里调整html源码，然后运行了看效果。
4、总结
虽然你的问题问的是，有什么办法能让VS里的内核切换成谷歌浏览器里的效果。
但是看了我上面的分析，我想你应该明白，这个问题的本质不在于用什么内核来预览，你只要够理解你自己写的代码，你就不用担心它在这里显示成什么样。
你应该关心的是，运行出来后，把地址复制到谷歌浏览器，IE，Firefox甚至是safari中，看看页面的表现是否相差不大。
既然VS里的内核是IE的，你为什么不在IE下看看运行出来是否也是设计视图的这个样子呢？
如果也是这样乱乱的，请确认你使用的是IE9以上的版本，和保证你的代码兼容性。
明白了吗？不要纠结这个问题了。
