Home Backend Development PHP Tutorial 浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法_php技巧

浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法_php技巧

May 17, 2016 am 09:07 AM
css layout

在编写PHP文件过程中,发现在浏览器预览PHP文件时,顶部会出现一行空白,影响了页面的布局。

关于BOM header的解释如下

通常情况下,使用Windows系统自带的记事本程序编写网页程序,但在编写或修改php博客系统代码后,进行调试时总是会出现如同以下几点问题:

–不能登入或者不能登出;
–页顶出现一条空白;
–页顶出现错误警告;
–其它不正常的情况。

分析原因
由于使用UTF-8编码,在编写或修改代码后都保存为utf-8编码格式。虽然现在几乎所有的文本编辑软件都可以显示并编辑UTF-8编码的文件,但是很遗憾的是其中很多软件的表现并不理想。

类 似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(_0xEF _0xBB _0xBF,即BOM——Byte Order Mark)。它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,PHP在设计时就没有考虑BOM的问题,不会忽略UTF-8编码的文件开头BOM的那三个字符,会把BOM作为该文件开头正文的一部分。由于必须在
解决办法

在编辑、更改任何文本文件时,请务必使用不会乱加BOM的编辑器。Linux下的编辑器应该都没有这个问题。WINDOWS下,请勿使用记事本等编辑器。推荐的编辑器是:
Editplus 2.12版本以上;
EmEditor;
UltraEdit(需要取消‘添加BOM'的相关选项);
Dreamweaver(需要取消‘添加BOM'的相关选项);
Notepad(需要进行“转换为不带BOM的UTF-8”)等。

对于已经添加了BOM的文件,要取消的话,可以用以上编辑器另存一次。(Editplus需要先另存为gb,再另存为UTF-8。Dreamweaver在”页面属性“的 “包含Unicode 签名(BOM)”取消即可)

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element Jan 05, 2024 pm 05:41 PM

From px to rem: The evolution and application of CSS layout units Introduction: In front-end development, we often need to use CSS to implement page layout. Over the past few years, CSS layout units have evolved and developed. Initially we used pixels (px) as the unit to set the size and position of elements. However, with the rise of responsive design and the popularity of mobile devices, pixel units have gradually exposed some problems. In order to solve these problems, the new unit rem came into being and was gradually widely used in CSS layout. one

CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout Oct 20, 2023 am 10:46 AM

CSS Layout Tips: Best Practices for Implementing Circular Grid Icon Layout Grid layout is a common and powerful layout technique in modern web design. The circular grid icon layout is a more unique and interesting design choice. This article will introduce some best practices and specific code examples to help you implement a circular grid icon layout. HTML structure First, we need to set up a container element and place the icon in this container. We can use an unordered list (<ul>) as a container, and the list items (<l

Methods and techniques on how to implement waterfall flow layout through pure CSS Methods and techniques on how to implement waterfall flow layout through pure CSS Oct 20, 2023 pm 06:01 PM

Methods and techniques on how to implement waterfall flow layout through pure CSS. Waterfall layout (Waterfall Layout) is a common layout method in web design. It arranges content in multiple columns with inconsistent heights to form an image. Waterfall-like visual effects. This layout is often used in situations where a large amount of content needs to be displayed, such as picture display and product display, and has a good user experience. There are many ways to implement a waterfall layout, and it can be done using JavaScript or CSS.

CSS Positions layout method to implement responsive image layout CSS Positions layout method to implement responsive image layout Sep 26, 2023 pm 01:37 PM

CSSPositions layout method to implement responsive image layout In modern web development, responsive design has become an essential skill. In responsive design, image layout is one of the important considerations. This article will introduce how to use CSSPositions layout to implement responsive image layout and provide specific code examples. CSSPositions is a layout method of CSS that allows us to position elements arbitrarily in the web page as needed. In responsive image layout,

CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout Oct 19, 2023 am 10:19 AM

CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout, with Code Examples Introduction: In web development, layout is a very important part. A good layout can make a web page more readable and accessible. Among them, the Holy Grail layout is a very classic layout method. It can center the content and maintain an elegant display effect while achieving adaptability. This article will introduce how to use the best method to implement the Holy Grail layout and give specific code examples. 1. What is the Holy Grail layout? The Holy Grail layout is a common three-column layout.

CSS Layout Tips: Best Practices for Implementing the Stacked Card Effect CSS Layout Tips: Best Practices for Implementing the Stacked Card Effect Oct 22, 2023 am 08:19 AM

CSS Layout Tips: Best Practices for Achieving Stacked Card Effects In modern web design, card layout has become a very popular design trend. Card layout can effectively display information, provide a good user experience, and facilitate responsive design. In this article, we’ll share some of the best CSS layout techniques for achieving a stacked card effect, along with specific code examples. Layout using Flexbox Flexbox is a powerful layout model introduced in CSS3. It can easily achieve the effect of stacking cards

CSS layout tutorial: The best way to implement a two-column responsive layout CSS layout tutorial: The best way to implement a two-column responsive layout Oct 18, 2023 am 11:04 AM

CSS Layout Tutorial: The Best Way to Implement Two-Column Responsive Layout Introduction: In web design, responsive layout is a very important technology that allows web pages to automatically adjust their layout according to the screen size and resolution of the user's device, providing Better user experience. In this tutorial, we'll show you how to use CSS to implement a simple two-column responsive layout, and provide specific code examples. 1. HTML structure: First, we need to create a basic HTML structure, as shown below: <!DOCTYPEht

See all articles